@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 6.07 kB
JavaScript
import{r as i,c as e,h as t,H as l,F as n,g as a}from"./p-WTwLUJcM.js";import{o,j as s}from"./p-COrzvkrr.js";const d=class{constructor(t){i(this,t),this.contentEdited=e(this,"contentEdited",7),this.contentFocused=e(this,"contentFocused",7),this.contentBlured=e(this,"contentBlured",7),this.maxLength=64,this.isHovering=!1,this.isEditing=!1,this.isSaving=!1,this.isSaveDisabled=!1,this.discardContent=()=>{this.slotEl.innerText=this.value},this.saveChanges=()=>{this.slotEl.blur();const i=this.slotEl.innerText;0!==i.length&&i!==this.value&&(this.isSaving=!0,this.contentEdited.emit(i))},this.handleBlur=()=>{this.slotEl.innerText=this.slotEl.innerText.trim(),this.timeoutID=window.setTimeout((()=>{this.isSaving||this.discardContent(),this.isEditing=!1,this.isSaving=!1,this.contentBlured.emit()}),200)},this.handleFocus=()=>{clearTimeout(this.timeoutID),this.isEditing=!0,this.contentFocused.emit(),this.checkSaveBtnDisabled()},this.handleMaxLength=i=>{this.maxLength&&this.slotEl.innerText.length>=this.maxLength&&i.preventDefault()},this.checkSaveBtnDisabled=()=>{this.isSaveDisabled=0===this.slotEl.innerText.trim().length}}async resetContent(){this.discardContent(),this.slotEl.blur()}handleMouseHover(){this.isHovering=!0}handleMouseLeave(){this.isHovering=!1}handleKeyDown(i){if(this.isEditing&&!this.disabled)switch(i.key){case"Escape":this.slotEl.blur();break;case"Enter":this.saveChanges();break;case"Backspace":break;default:this.handleMaxLength(i)}}handleDisableChange(i){this.slotEl&&(i?this.destroyEditableContent():this.initializeEditableContent())}handlePlaceholderChange(i){this.slotEl&&(i?this.slotEl.setAttribute("data-placeholder",i):this.slotEl.removeAttribute("data-placeholder"))}initializeEditableContent(){this.slotEl.classList.add("inline-editable-field-slot"),this.slotEl.setAttribute("contenteditable","true"),this.placeholder&&this.slotEl.setAttribute("data-placeholder",this.placeholder),this.slotEl.addEventListener("blur",this.handleBlur),this.slotEl.addEventListener("focus",this.handleFocus),this.slotEl.addEventListener("input",this.checkSaveBtnDisabled)}destroyEditableContent(){this.slotEl&&(this.slotEl.classList.remove("inline-editable-field-slot"),this.slotEl.removeAttribute("contenteditable"),this.slotEl.removeAttribute("data-placeholder"),this.slotEl.removeEventListener("blur",this.handleBlur),this.slotEl.removeEventListener("focus",this.handleFocus),this.slotEl.removeEventListener("input",this.checkSaveBtnDisabled))}componentDidLoad(){if(this.disabled)return;const i=Array.from(this.el.children).filter((i=>!i.classList.contains("inline-editable-field-actions")));1===i.length?(this.slotEl=i[0],this.initializeEditableContent()):console.warn("Inline editable field must have exactly one child element to be editable")}disconnectedCallback(){clearTimeout(this.timeoutID),this.destroyEditableContent()}render(){return this.disabled?t(l,null,t("slot",null)):t(l,{class:{"inline-editable-field-container":!0,"inline-editable-field-container__hover":this.isHovering,"inline-editable-field-container__editing":this.isEditing}},t("slot",null),t("div",{class:{"inline-editable-field-actions":!0,"inline-editable-field-actions__focus":this.isEditing}},this.isEditing&&t(n,null,t("kv-action-button-icon",{type:s.Tertiary,icon:o.Close,onClickButton:this.discardContent}),t("kv-action-button-icon",{type:s.Tertiary,icon:o.DoneAll,disabled:this.isSaveDisabled,onClickButton:this.saveChanges}))))}get el(){return a(this)}static get watchers(){return{disabled:["handleDisableChange"],placeholder:["handlePlaceholderChange"]}}};d.style='@charset "UTF-8";@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}.inline-editable-field-container{display:inline-flex;align-items:center;width:100%;--margin-top-bottom:var(--spacing-xs);--margin-left-right:var(--spacing-md);--inline-editable-field-background-color-hover:var(--input-background-default);--inline-editable-field-outline-color-hover:var(--input-border-color-default);--inline-editable-field-outline-color-focus:var(--input-border-color-selected);--inline-editable-field-placeholder-color:var(--input-text-text-input-default);--inline-editable-field-min-width:unset;--inline-editable-field-editing-min-width:unset}.inline-editable-field-container__hover .inline-editable-field-slot{border-radius:var(--radius-md);background:var(--inline-editable-field-background-color-hover);outline-color:var(--inline-editable-field-outline-color-hover)}.inline-editable-field-container:not(.inline-editable-field-container__editing) .inline-editable-field-slot[contenteditable]:empty::before{content:attr(data-placeholder);color:var(--inline-editable-field-placeholder-color);pointer-events:none}.inline-editable-field-container__editing .inline-editable-field-slot[contenteditable]{min-width:var(--inline-editable-field-editing-min-width)}.inline-editable-field-slot[contenteditable]{padding:var(--margin-top-bottom) var(--margin-left-right);margin:calc(var(--margin-top-bottom) * -1) calc(var(--margin-left-right) * -1);min-width:var(--inline-editable-field-min-width);white-space:nowrap;overflow:hidden;outline:1px solid transparent;transition:all 0.25s ease-in-out}.inline-editable-field-slot[contenteditable]:hover,.inline-editable-field-slot[contenteditable]:focus{border-radius:var(--radius-md);background:var(--inline-editable-field-background-color-hover);outline-color:var(--inline-editable-field-outline-color-hover)}.inline-editable-field-slot[contenteditable]:focus{outline-color:var(--inline-editable-field-outline-color-focus);text-overflow:unset}.inline-editable-field-slot br{display:none}.inline-editable-field-slot *{display:inline;white-space:nowrap}.inline-editable-field-actions{display:inline-flex;gap:var(--spacing-xs);flex:0;margin-left:calc(var(--margin-left-right) + var(--spacing-md))}.inline-editable-field-actions__focus{width:64px;align-self:flex-end;margin-bottom:calc(var(--margin-top-bottom) * -1)}';export{d as kv_inline_editable_field}