kempo-ui 0.4.20 → 0.4.21

package/dist/components/tableControls/Hide.js

@@ -1,5 +0,0 @@
-import t from"./TableControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super({maxWidth:40})}handleHide=()=>{this.record&&this.table.hideRecord(this.record)};render(){return e`
-			<button class="no-btn icon-btn" @click="${this.handleHide}">
-				<k-icon name="hide"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-hide",o);

package/dist/components/tableControls/LastPage.js

@@ -1,9 +0,0 @@
-import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class a extends e{constructor(){super(),this.pageChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.table&&this.table.addEventListener("pageChange",this.pageChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&this.table.removeEventListener("pageChange",this.pageChangeHandler)}handleClick=()=>{this.table&&this.table.lastPage()};get isDisabled(){return!this.table||this.table.getCurrentPage()===this.table.getTotalPages()}render(){return t`
-			<button 
-				class="no-btn icon-btn" 
-				?disabled="${this.isDisabled}"
-				@click="${this.handleClick}"
-			>
-				<k-icon name="chevron-line"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-last-page",a);

package/dist/components/tableControls/NextPage.js

@@ -1,9 +0,0 @@
-import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class a extends e{constructor(){super(),this.pageChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.table&&this.table.addEventListener("pageChange",this.pageChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&this.table.removeEventListener("pageChange",this.pageChangeHandler)}handleClick=()=>{this.table&&this.table.nextPage()};get isDisabled(){return!this.table||this.table.getCurrentPage()===this.table.getTotalPages()}render(){return t`
-			<button 
-				class="no-btn icon-btn" 
-				?disabled="${this.isDisabled}"
-				@click="${this.handleClick}"
-			>
-				<k-icon name="chevron"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-next-page",a);

package/dist/components/tableControls/PageSelect.js

@@ -1,22 +0,0 @@
-import e from"./TableControl.js";import{html as t,css as a}from"../../lit-all.min.js";export default class l extends e{static properties={...e.properties};constructor(){super({maxWidth:null})}connectedCallback(){super.connectedCallback(),this.onTableEvent("pageChange pageSizeChange pageCountChanged recordsSet",this.handleTableUpdate)}disconnectedCallback(){super.disconnectedCallback(),this.table&&(this.table.removeEventListener("pageChange",this.handleTableUpdate),this.table.removeEventListener("pageSizeChange",this.handleTableUpdate),this.table.removeEventListener("pageCountChanged",this.handleTableUpdate),this.table.removeEventListener("recordsSet",this.handleTableUpdate))}handleTableUpdate=()=>{this.requestUpdate()};handleSelectChange=e=>{this.table&&this.table.setPage(parseInt(e.target.value))};get currentPage(){return this.table?this.table.getCurrentPage():1}get totalPages(){return this.table?this.table.getTotalPages():1}render(){if(!this.table)return t`<div>No table found</div>`;const e=[];for(let a=1;a<=this.totalPages;a++)e.push(t`<option value="${a}" ?selected="${a===this.currentPage}">Page ${a}</option>`);return t`
-			<div class="page-select">
-				<select class="no-btn ph b r" @change="${this.handleSelectChange}" ?disabled="${this.totalPages<=1}">
-					${e}
-				</select>
-				<label> out of ${this.totalPages}</label>
-			</div>
-		`}static styles=a`
-		${e.styles}
-		
-		.page-select {
-			display: flex;
-			align-items: center;
-			gap: 0.25rem;
-			white-space: nowrap;
-		}
-		
-		label {
-			padding: 0;
-			margin: 0;
-		}
-	`}customElements.define("k-tc-page-select",l);

package/dist/components/tableControls/PageSize.js

@@ -1,5 +0,0 @@
-import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";export default class a extends e{constructor(){super({maxWidth:null}),this.pageChangeHandler=()=>this.requestUpdate(),this.pageSizeChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.onTableEvent("pageChange",this.pageChangeHandler),this.onTableEvent("pageSizeChange",this.pageSizeChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&(this.table.removeEventListener("pageChange",this.pageChangeHandler),this.table.removeEventListener("pageSizeChange",this.pageSizeChangeHandler))}handleChange=e=>{this.table&&this.table.setPageSize(parseInt(e.target.value))};get currentPageSize(){return this.table?this.table.getPageSize():10}get pageSizeOptions(){return this.table?this.table.pageSizeOptions:[10,25,50,100,500]}render(){return t`
-			<select class="no-btn ph b r" @change="${this.handleChange}">
-				${this.pageSizeOptions.map(e=>t`<option value="${e}" ?selected="${e===this.currentPageSize}">${e} per page</option>`)}
-			</select>
-		`}}customElements.define("k-tc-page-size",a);

package/dist/components/tableControls/PrevPage.js

@@ -1,9 +0,0 @@
-import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class a extends e{constructor(){super(),this.pageChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.table&&this.table.addEventListener("pageChange",this.pageChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&this.table.removeEventListener("pageChange",this.pageChangeHandler)}handleClick=()=>{this.table&&this.table.prevPage()};get isDisabled(){return!this.table||1===this.table.getCurrentPage()}render(){return t`
-			<button 
-				class="no-btn icon-btn" 
-				?disabled="${this.isDisabled}"
-				@click="${this.handleClick}"
-			>
-				<k-icon name="chevron" direction="left"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-prev-page",a);

package/dist/components/tableControls/Search.js

@@ -1,9 +0,0 @@
-import e from"./TableControl.js";import{html as r}from"../../lit-all.min.js";import t from"../../utils/debounce.js";export default class s extends e{static properties={searchTerm:{type:String}};constructor(){super({maxWidth:200}),this.debouncedSearch=t(this.performSearch,200)}handleInput=e=>{this.searchTerm=e.target.value,this.debouncedSearch()};performSearch=()=>{this.table&&(!this.searchTerm||this.searchTerm.length<3?this.table.showAllRecords():this.table.search(this.searchTerm))};render(){return r`
-			<input
-				type="search"
-				placeholder="Search"
-				class="px pyh"
-				.value="${this.searchTerm||""}"
-				@input="${this.handleInput}"
-			/>
-		`}}customElements.define("k-tc-search",s);

package/dist/components/tableControls/ShowAll.js

@@ -1,5 +0,0 @@
-import t from"./TableControl.js";import{html as o}from"../../lit-all.min.js";import"../Icon.js";export default class l extends t{constructor(){super({maxWidth:40})}handleShowAll=()=>{this.table&&this.table.showAllRecords()};render(){return o`
-			<button class="no-btn icon-btn" @click="${this.handleShowAll}">
-				<k-icon name="show"></k-icon>
-			</button>
-		`}}customElements.define("k-tc-show-all",l);

package/dist/components/tableControls/TableControl.js

@@ -1,16 +0,0 @@
-import t from"../ShadowComponent.js";import{html as e,css as i}from"../../lit-all.min.js";export default class s extends t{static properties={maxWidth:{type:Number,reflect:!0,attribute:"max-width"}};constructor({maxWidth:t=40}={}){super(),this.maxWidth=t}updated(t){super.updated(t),t.has("maxWidth")&&(this.maxWidth?this.style.setProperty("--max-width",`${this.maxWidth}px`):this.style.removeProperty("--max-width"))}firstUpdated(){this.maxWidth?this.style.setProperty("--max-width",`${this.maxWidth}px`):this.style.removeProperty("--max-width")}get table(){return this.getRootNode()instanceof ShadowRoot?this.getRootNode().host.closest("k-table"):this.closest("k-table")}get record(){if(this.getRootNode()instanceof ShadowRoot){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.table.records[e]}}return!1}async onTableEvent(t,e){if(await customElements.whenDefined("k-table"),this.table){t.split(" ").forEach(t=>{this.table.addEventListener(t,e)}),this.requestUpdate()}}static styles=i`
-		:host {
-			display: inline-flex;
-		}
-		
-		.icon-btn {
-			display: inline-flex !important;
-			align-items: center;
-			justify-content: center;
-			width: 40px;
-			height: 40px;
-		}
-		.icon-btn:disabled {
-			opacity: 0.6;
-		}
-	`}customElements.define("k-table-control",s);

package/docs/src/components/codeEditorControls/CodeEditorControl.js

@@ -1,17 +0,0 @@
-import t from"../ShadowComponent.js";import{css as e}from"../../lit-all.min.js";export default class s extends t{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",this.hidden=!1}connectedCallback(){super.connectedCallback(),this.updateModeVisibility();const t=this.editor;"K-HTML-EDITOR"===t?.tagName&&(this.modeHandler=()=>this.updateModeVisibility(),t.addEventListener("mode-changed",this.modeHandler))}disconnectedCallback(){super.disconnectedCallback(),this.modeHandler&&(this.editor?.removeEventListener("mode-changed",this.modeHandler),this.modeHandler=null)}updated(t){super.updated(t),t.has("hidden")&&this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0}))}updateModeVisibility(){const t=this.editor;if("K-HTML-EDITOR"===t?.tagName){const e="code"!==t.mode;this.hidden!==e&&(this.hidden=e,this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0})))}}get editor(){const t=t=>"K-CODE-EDITOR"===t?.tagName||"K-HTML-EDITOR"===t?.tagName;let e=this.getRootNode();for(;e instanceof ShadowRoot;){const s=e.host;if(t(s))return s;e=s.getRootNode()}let s=this.parentElement;for(;s;){if(t(s))return s;s=s.parentElement}return null}get isInGroup(){const t=this.parentElement;return t&&"K-CEC-GROUP"===t.tagName}get isLastInGroup(){if(!this.isInGroup)return!1;const t=Array.from(this.parentElement.children).filter(t=>t.tagName.startsWith("K-CEC-")&&"K-CEC-SPACER"!==t.tagName);return t[t.length-1]===this}get buttonClasses(){let t;return t=this.isInGroup?this.isLastInGroup?this.groupLastBtnClass:this.groupBtnClass:this.btnClass,`no-btn icon-btn ${t}`.trim()}static styles=e`
-		:host {
-			display: inline-flex;
-			align-items: center;
-		}
-		:host([hidden]) {
-			display: none !important;
-		}
-		button {
-			cursor: pointer;
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-			min-width: 2rem;
-			min-height: 2rem;
-		}
-	`}

package/docs/src/components/codeEditorControls/ControlGroup.js

@@ -1,12 +0,0 @@
-import t from"../ShadowComponent.js";import{html as e,css as i}from"../../lit-all.min.js";export default class s extends t{static properties={hidden:{type:Boolean,reflect:!0}};constructor(){super(),this.hidden=!1}connectedCallback(){super.connectedCallback(),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)}checkVisibility=t=>{if(t.target===this)return;const e=this.hidden;this.hidden=Array.from(this.children).every(t=>!0===t.hidden),this.hidden!==e&&this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0}))};static styles=i`
-		:host {
-			display: inline-flex;
-		}
-		:host([hidden]) {
-			display: none !important;
-		}
-		::slotted(*) {
-			margin-top: -1px;
-			margin-bottom: -1px;
-		}
-	`;render(){return e`<slot></slot>`}}customElements.define("k-cec-group",s);

package/docs/src/components/codeEditorControls/CopyCode.js

@@ -1,9 +0,0 @@
-import t from"./CodeEditorControl.js";import{html as o,css as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static styles=[t.styles,e`
-			:host {
-				display: inline-flex;
-			}
-		`];handleClick=()=>{this.editor?.copyToClipboard()};render(){return o`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Copy Code">
-				<k-icon name="content_copy"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-copy-code",s);

package/docs/src/components/codeEditorControls/EditorTheme.js

@@ -1,26 +0,0 @@
-import e from"./CodeEditorControl.js";import{html as t,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends e{static properties={value:{type:String,state:!0}};constructor(){super(),this.value="auto"}connectedCallback(){super.connectedCallback();const e=this.editor;e&&(this.value=e.editorTheme||"auto",this.themeHandler=e=>{this.value=e.detail.editorTheme},e.addEventListener("editor-theme-changed",this.themeHandler))}disconnectedCallback(){super.disconnectedCallback(),this.editor?.removeEventListener("editor-theme-changed",this.themeHandler),this.themeHandler=null}handleChange=e=>{this.editor?.setEditorTheme(e.target.value)};static styles=[e.styles,o`
-			:host {
-				background-color: var(--input_bg);
-				color: var(--input_tc);
-				border: var(--input_border_width) solid var(--c_input_border);
-				border-radius: var(--radius);
-				transition: box-shadow var(--animation_ms);
-				position: relative;
-			}
-			k-icon {
-				pointer-events: none;
-				position: absolute;
-				left: 0.5rem;
-			}
-			select {
-				padding-left: 2rem;
-				border: 0;
-			}
-		`];render(){return t`
-			<k-icon name="contrast" style="font-size: 1.125rem; opacity: 0.7;"></k-icon>
-			<select .value=${this.value} @change=${this.handleChange} title="Editor Theme">
-				<option value="auto">Auto</option>
-				<option value="light">Light</option>
-				<option value="dark">Dark</option>
-			</select>
-		`}}customElements.define("k-cec-editor-theme",i);

package/docs/src/components/codeEditorControls/FindReplace.js

@@ -1,7 +0,0 @@
-import e from"./CodeEditorControl.js";import{html as t,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class s extends e{static styles=[e.styles,i`
-			:host { display: inline-flex; }
-		`];handleClick=()=>{this.editor?.openFind()};render(){return t`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Find & Replace">
-				<k-icon name="search"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-find-replace",s);

package/docs/src/components/codeEditorControls/FoldAll.js

@@ -1,7 +0,0 @@
-import l from"./CodeEditorControl.js";import{html as t,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class e extends l{static properties={folded:{type:Boolean,state:!0}};constructor(){super(),this.folded=!1}handleClick=()=>{this.folded=!this.folded,this.folded?this.editor?.foldAll():this.editor?.unfoldAll()};static styles=[l.styles,o`
-			:host { display: inline-flex; }
-		`];render(){return t`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="${this.folded?"Unfold All":"Fold All"}">
-				<k-icon name="${this.folded?"unfold_more":"unfold_less"}"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-fold-all",e);

package/docs/src/components/codeEditorControls/FontSize.js

@@ -1,13 +0,0 @@
-import e from"./CodeEditorControl.js";import{html as t,css as s}from"../../lit-all.min.js";import"../Icon.js";export default class n extends e{static styles=[e.styles,s`
-			:host {
-				display: inline-flex;
-				gap: 0;
-			}
-		`];handleIncrease=()=>{this.editor?.increaseFontSize()};handleDecrease=()=>{this.editor?.decreaseFontSize()};render(){return t`
-			<button class="${this.buttonClasses}" @click="${this.handleDecrease}" title="Decrease Font Size">
-				<k-icon name="text_decrease"></k-icon>
-			</button>
-			<button class="${this.buttonClasses}" @click="${this.handleIncrease}" title="Increase Font Size">
-				<k-icon name="text_increase"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-font-size",n);

package/docs/src/components/codeEditorControls/FormatCode.js

@@ -1,9 +0,0 @@
-import t from"./CodeEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static styles=[t.styles,o`
-			:host {
-				display: inline-flex;
-			}
-		`];handleClick=()=>{this.editor?.formatCode()};render(){return e`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Format Code">
-				<k-icon name="frame_source"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-format-code",s);

package/docs/src/components/codeEditorControls/Fullscreen.js

@@ -1,12 +0,0 @@
-import e from"./CodeEditorControl.js";import{html as l,css as s}from"../../lit-all.min.js";import"../Icon.js";export default class t extends e{static properties={fullscreen:{type:Boolean,state:!0}};constructor(){super(),this.fullscreen=!1}connectedCallback(){super.connectedCallback();const e=this.editor;e&&(this.fullscreen=e.fullscreen,this.fullscreenHandler=()=>{this.fullscreen=e.fullscreen},e.addEventListener("fullscreen-changed",this.fullscreenHandler))}disconnectedCallback(){super.disconnectedCallback(),this.editor?.removeEventListener("fullscreen-changed",this.fullscreenHandler),this.fullscreenHandler=null}updateModeVisibility(){}handleClick=()=>{this.editor?.toggleFullscreen()};static styles=[e.styles,s`
-			:host { display: inline-flex; }
-			button.active { background: var(--primary-bg, rgba(0,120,212,0.15)); }
-		`];render(){return l`
-			<button
-				class="${this.buttonClasses} ${this.fullscreen?"active":""}"
-				@click="${this.handleClick}"
-				title="${this.fullscreen?"Exit Fullscreen":"Fullscreen"}"
-			>
-				<k-icon name="${this.fullscreen?"fullscreen_exit":"fullscreen"}"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-fullscreen",t);

package/docs/src/components/codeEditorControls/LanguageSelect.js

@@ -1,15 +0,0 @@
-import e from"./CodeEditorControl.js";import{html as a,css as t}from"../../lit-all.min.js";import"../Icon.js";const l=["javascript","typescript","html","css","json","markdown","python","java","csharp","cpp","go","rust","php","ruby","sql","xml","yaml","shell","plaintext"];export default class n extends e{static properties={value:{type:String,state:!0}};constructor(){super(),this.value="javascript"}connectedCallback(){super.connectedCallback();const e=this.editor;e&&(this.value=e.language||"javascript",this.languageHandler=e=>{this.value=e.detail.language},e.addEventListener("language-changed",this.languageHandler))}disconnectedCallback(){super.disconnectedCallback(),this.editor?.removeEventListener("language-changed",this.languageHandler),this.languageHandler=null}handleChange=e=>{this.editor?.setLanguage(e.target.value)};static styles=[e.styles,t`
-			:host {
-				display: inline-flex;
-				align-items: center;
-				padding: 0 0.25rem;
-				gap: 0.25rem;
-				background-color: 
-			}
-		`];render(){return a`
-			<select .value=${this.value} @change=${this.handleChange} title="Language">
-				${l.map(e=>a`
-					<option value="${e}" ?selected=${this.value===e}>${e}</option>
-				`)}
-			</select>
-		`}}customElements.define("k-cec-language",n);

package/docs/src/components/codeEditorControls/Minimap.js

@@ -1,8 +0,0 @@
-import i from"./CodeEditorControl.js";import{html as t,css as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends i{static properties={active:{type:Boolean,state:!0}};constructor(){super(),this.active=!1}connectedCallback(){super.connectedCallback();const i=this.editor;i&&(this.active=i.minimapEnabled,this.minimapHandler=i=>{this.active=i.detail.minimapEnabled},i.addEventListener("minimap-changed",this.minimapHandler))}disconnectedCallback(){super.disconnectedCallback(),this.editor?.removeEventListener("minimap-changed",this.minimapHandler),this.minimapHandler=null}handleClick=()=>{this.editor?.toggleMinimap()};static styles=[i.styles,e`
-			:host { display: inline-flex; }
-			button.active { background: var(--primary-bg, rgba(0,120,212,0.15)); }
-		`];render(){return t`
-			<button class="${this.buttonClasses} ${this.active?"active":""}" @click="${this.handleClick}" title="Toggle Minimap">
-				<k-icon name="map"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-minimap",n);

package/docs/src/components/codeEditorControls/Redo.js

@@ -1,7 +0,0 @@
-import t from"./CodeEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static styles=[t.styles,o`
-			:host { display: inline-flex; }
-		`];handleClick=()=>{this.editor?.redo()};render(){return e`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Redo">
-				<k-icon name="redo"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-redo",s);

package/docs/src/components/codeEditorControls/Undo.js

@@ -1,7 +0,0 @@
-import t from"./CodeEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static styles=[t.styles,o`
-			:host { display: inline-flex; }
-		`];handleClick=()=>{this.editor?.undo()};render(){return e`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}" title="Undo">
-				<k-icon name="undo"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-undo",s);

package/docs/src/components/codeEditorControls/WordWrap.js

@@ -1,8 +0,0 @@
-import t from"./CodeEditorControl.js";import{html as e,css as r}from"../../lit-all.min.js";import"../Icon.js";export default class a extends t{static properties={active:{type:Boolean,state:!0}};constructor(){super(),this.active=!0}connectedCallback(){super.connectedCallback();const t=this.editor;t&&(this.active=t.wordWrap,this.wordWrapHandler=t=>{this.active=t.detail.wordWrap},t.addEventListener("word-wrap-changed",this.wordWrapHandler))}disconnectedCallback(){super.disconnectedCallback(),this.editor?.removeEventListener("word-wrap-changed",this.wordWrapHandler),this.wordWrapHandler=null}handleClick=()=>{this.editor?.toggleWordWrap()};static styles=[t.styles,r`
-			:host { display: inline-flex; }
-			button.active { background: var(--primary-bg, rgba(0,120,212,0.15)); }
-		`];render(){return e`
-			<button class="${this.buttonClasses} ${this.active?"active":""}" @click="${this.handleClick}" title="Word Wrap">
-				<k-icon name="wrap_text"></k-icon>
-			</button>
-		`}}customElements.define("k-cec-word-wrap",a);

package/docs/src/components/htmlEditorControls/AlignCenter.js

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
-			: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,e`
-			<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",o);

package/docs/src/components/htmlEditorControls/AlignJustify.js

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
-			: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,e`
-			<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",o);

package/docs/src/components/htmlEditorControls/AlignLeft.js

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
-			: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,e`
-			<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",o);

package/docs/src/components/htmlEditorControls/AlignRight.js

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
-			: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,e`
-			<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",o);

package/docs/src/components/htmlEditorControls/Bold.js

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
-			: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,e`
-			<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",i);

package/docs/src/components/htmlEditorControls/BulletList.js

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
-			: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,e`
-			<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",o);

package/docs/src/components/htmlEditorControls/CharacterCount.js

@@ -1,18 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as r}from"../../lit-all.min.js";export default class s extends t{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 e`
-			<span class="character-count">
-				<slot name="label">Characters:</slot> ${this.count}
-			</span>
-		`}static styles=[t.styles,r`
-			: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",s);

package/docs/src/components/htmlEditorControls/ClearFormatting.js

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
-			: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,e`
-			<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",i);

package/docs/src/components/htmlEditorControls/CodeBlock.js

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
-			:host {
-				display: inline-flex;
-			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.formatBlock(this.editor.isSelectionInCodeBlock()?"p":"pre")};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<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",i);

package/docs/src/components/htmlEditorControls/ControlGroup.js

@@ -1,12 +0,0 @@
-import t from"../ShadowComponent.js";import{html as e,css as i}from"../../lit-all.min.js";export default class s extends t{static properties={hidden:{type:Boolean,reflect:!0}};constructor(){super(),this.hidden=!1}connectedCallback(){super.connectedCallback(),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)}checkVisibility=t=>{if(t.target===this)return;const e=this.hidden;this.hidden=Array.from(this.children).every(t=>!0===t.hidden),this.hidden!==e&&this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0}))};static styles=i`
-		:host {
-			display: inline-flex;
-		}
-		:host([hidden]) {
-			display: none !important;
-		}
-		::slotted(*) {
-			margin-top: -1px;
-			margin-bottom: -1px;
-		}
-	`;render(){return e`<slot></slot>`}}customElements.define("k-hec-group",s);

package/docs/src/components/htmlEditorControls/ControlSpacer.js

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

package/docs/src/components/htmlEditorControls/CreateLink.js

@@ -1,15 +0,0 @@
-import e from"./HtmlEditorControl.js";import{html as t,css as i}from"../../lit-all.min.js";import"../Icon.js";import o from"../Dialog.js";export default class l extends e{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)}))}handleClick=()=>{if(!this.editor)return;const e=this.editor.getSelectedText(),t=document.createElement("input");t.type="text",t.placeholder="https://example.com",t.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 l=document.createElement("div");l.className="p",l.style.cssText="display: flex; flex-direction: column; gap: 1rem;",l.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',l.children[0].appendChild(t),l.children[1].appendChild(i),o.create(l,{title:"Create Link",cancelText:"Cancel",confirmText:"Insert Link",confirmClasses:"success ml",confirmAction:o=>{const l=t.value.trim(),n=i.value.trim();l?!this.editor.selection||n&&n!==e?this.editor.createLinkWithText(l,n||l):this.editor.createLink(l):o.keepDialogOpen=!0}})};render(){return this.hidden="code"===this.editorMode,t`
-			<button
-				class="${this.buttonClasses}"
-				@click="${this.handleClick}"
-			>
-				<slot name="icon">
-					<k-icon name="link"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`}static styles=[e.styles,i`
-			:host {
-				display: inline-flex;
-			}
-		`]}customElements.define("k-hec-create-link",l);

package/docs/src/components/htmlEditorControls/DropdownControl.js

@@ -1,57 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as o,css as e}from"../../lit-all.min.js";import"../Dropdown.js";import"../Icon.js";export default class n extends t{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=[t.styles,e`
-      :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 o`
-      <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",n);

package/docs/src/components/htmlEditorControls/FormatBlock.js

@@ -1,12 +0,0 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as a}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0},tag:{type:String},label:{type:String}};static styles=[t.styles,a`
-			: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 e`
-			<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",o);

package/docs/src/components/htmlEditorControls/FormatCode.js

@@ -1 +0,0 @@
-import o from"../codeEditorControls/FormatCode.js";export default o;

package/docs/src/components/htmlEditorControls/HtmlEditorControl.js

@@ -1,44 +0,0 @@
-import t from"../ShadowComponent.js";import{html as e,css as n}from"../../lit-all.min.js";export default class o extends t{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",this.hidesInCodeMode=!0}connectedCallback(){super.connectedCallback();const t=this.editor;t&&(this.modeEditor=t,this.modeHandler=()=>{const t=this.hidesInCodeMode&&"code"===this.modeEditor.mode;this.hidden!==t&&(this.hidden=t,this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0})))},t.addEventListener("mode-changed",this.modeHandler))}disconnectedCallback(){super.disconnectedCallback(),this.modeEditor?.removeEventListener("mode-changed",this.modeHandler),this.modeEditor=null,this.modeHandler=null}updated(t){super.updated(t),t.has("hidden")&&this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0}))}get editor(){const t=t=>t?.tagName?.startsWith("K-HTML-EDITOR");let e=this.getRootNode();for(;e instanceof ShadowRoot;){const n=e.host;if(t(n))return n;e=n.getRootNode()}let n=this.parentElement;for(;n;){if(t(n))return n;n=n.parentElement}return null}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,e=Array.from(t.children).filter(t=>t.tagName.startsWith("K-HEC-")&&"K-HEC-SPACER"!==t.tagName);return e[e.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=n`
-		: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",o);