kempo-ui 0.0.43 → 0.0.63

package/dist/components/htmlEditorControls/TextBackgroundColor.js

@@ -0,0 +1,97 @@
+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:!0},colors:{type:String},disableRemove:{type:Boolean,attribute:"disable-remove"},disablePicker:{type:Boolean,attribute:"disable-picker"}};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(){super(),this.colors="#ffff00,#00ffff,#ff66ff,#99ff99,#ffcc99,#ff9999,#cccccc,#ffffff,#ffffcc,#ccffff,#ffccff,#ccffcc",this.disableRemove=!1,this.disablePicker=!1,this.icon="format_color_fill"}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleRemove=o=>{o.preventDefault(),o.stopPropagation(),this.editor&&this.editor.removeTextBackgroundColor(),this.opened=!1};handleSwatchClick=o=>{o.preventDefault(),o.stopPropagation();const e=o.target.style.backgroundColor;if(this.editor&&e){const o=e.match(/\d+/g),t=o?"#"+o.map(o=>parseInt(o).toString(16).padStart(2,"0")).join(""):e;this.editor.setTextBackgroundColor(t)}this.opened=!1};handlePickerChange=o=>{o.preventDefault(),o.stopPropagation();const e=o.target.value;this.editor&&e&&this.editor.setTextBackgroundColor(e),this.opened=!1};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}getColorArray(){return this.colors.split(",").map(o=>o.trim()).filter(o=>o)}render(){this.hidden="code"===this.editorMode;const o=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">
+						${o.map(o=>html`
+							<button 
+								class="color-swatch" 
+								style="background-color: ${o}"
+								@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);

package/dist/components/htmlEditorControls/TextColor.js

@@ -0,0 +1,97 @@
+import DropdownControl from"./DropdownControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class TextColor extends DropdownControl{static properties={editorMode:{type:String,state:!0},colors:{type:String},disableRemove:{type:Boolean,attribute:"disable-remove"},disablePicker:{type:Boolean,attribute:"disable-picker"}};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(){super(),this.colors="#000000,#e60000,#ff9900,#ffff00,#008a00,#0066cc,#9933ff,#ffffff,#facccc,#ffebcc,#ffffcc,#cce8cc,#cce0f5,#ebd6ff",this.disableRemove=!1,this.disablePicker=!1,this.icon="format_color_text"}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleRemove=o=>{o.preventDefault(),o.stopPropagation(),this.editor&&this.editor.removeTextColor(),this.opened=!1};handleSwatchClick=o=>{o.preventDefault(),o.stopPropagation();const e=o.target.style.backgroundColor;if(this.editor&&e){const o=e.match(/\d+/g),t=o?"#"+o.map(o=>parseInt(o).toString(16).padStart(2,"0")).join(""):e;this.editor.setTextColor(t)}this.opened=!1};handlePickerChange=o=>{o.preventDefault(),o.stopPropagation();const e=o.target.value;this.editor&&e&&this.editor.setTextColor(e),this.opened=!1};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}getColorArray(){return this.colors.split(",").map(o=>o.trim()).filter(o=>o)}render(){this.hidden="code"===this.editorMode;const o=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_text"></k-icon>
+				</button>
+				
+				<div class="dropdown-content">
+					${this.disableRemove?"":html`
+						<button class="remove-btn" @click=${this.handleRemove}>
+							Remove Color
+						</button>
+					`}
+					
+					<div class="color-swatches">
+						${o.map(o=>html`
+							<button 
+								class="color-swatch" 
+								style="background-color: ${o}"
+								@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-color",TextColor);

package/dist/components/htmlEditorControls/Underline.js

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

package/dist/components/htmlEditorControls/WordCount.js

@@ -0,0 +1,18 @@
+import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";export default class WordCount 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||"").trim().split(/\s+/).filter(t=>t.length>0);this.count=t.length};render(){return html`
+			<span class="word-count">
+				<slot name="label">Words:</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);
+			}
+			.word-count {
+				display: flex;
+				align-items: center;
+				gap: 0.25rem;
+			}
+		`]}customElements.define("k-hec-word-count",WordCount);

package/dist/utils/formatCode.js

@@ -0,0 +1 @@
+export default(t,e={})=>{if(!t)return"";const{indent:n="  ",blockTags:r=["div","p","pre","h1","h2","h3","h4","h5","h6","ul","ol","li","table","thead","tbody","tr","td","th","form","fieldset","section","article","header","footer","nav","main","aside"],selfClosingTags:s=["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]}=e;let o="",a=0;const i=[];let c=0;const l=/<[^>]+>/g;let h;for(;null!==(h=l.exec(t));){if(h.index>c){const e=t.substring(c,h.index).trim();e&&i.push({type:"text",content:e})}i.push({type:"tag",content:h[0]}),c=h.index+h[0].length}if(c<t.length){const e=t.substring(c).trim();e&&i.push({type:"text",content:e})}let d=!1;return i.forEach((t,e)=>{if("text"===t.type)o+=t.content,d=!1;else{const e=t.content,i=e.startsWith("</"),c=(t=>{const e=t.match(/<\/?(\w+)/)?.[1]?.toLowerCase();return e&&r.includes(e)})(e),l=(t=>{const e=t.match(/<(\w+)/)?.[1]?.toLowerCase();return e&&s.includes(e)||t.endsWith("/>")})(e);i&&c?(a=Math.max(0,a-1),o+=d?"\n"+n.repeat(a)+e:e,d=!0):c&&!l?(d&&o.length>0||o.length>0?o+="\n"+n.repeat(a)+e:o+=n.repeat(a)+e,a++,d=!0):(o+=e,d=!1)}}),o.trim()};

package/docs/components/dropdown.html

@@ -64,7 +64,7 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"trigger"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"more_vert"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"edit"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"edit"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Edit<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"copy"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"content_copy"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Copy<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"delete"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-danger"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"delete"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Delete<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"trigger"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"more_vert"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"edit"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"edit"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Edit<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"copy"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"copy"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Copy<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"delete"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-danger"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"delete"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Delete<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -77,7 +77,7 @@
               <k-icon name="edit"></k-icon> Edit
             </button>
             <button data-value="copy">
-              <k-icon name="content_copy"></k-icon> Copy
+              <k-icon name="copy"></k-icon> Copy
             </button>
             <button data-value="delete" class="tc-danger">
               <k-icon name="delete"></k-icon> Delete