graphdb-workbench/dist/1785.c6198be9a000182096a2.bundle.js

The web application for GraphDB APIs

export const __webpack_id__=1785;export const __webpack_ids__=[1785];export const __webpack_modules__={1785:(e,t,i)=>{i.r(t),i.d(t,{ontotext_editable_text_field:()=>s});var a=i(76128);const s=class{constructor(e){(0,a.r)(this,e),this.valueChanged=(0,a.c)(this,"valueChanged",7),this.componentModeChanged=(0,a.c)(this,"componentModeChanged",7),this.skipFirstClickOutside=!0,this.value=void 0,this.edit=!1,this.translationService=void 0}handleEditModeChange(e){this.edit=e,this.editedValue=this.value,this.componentModeChanged.emit(this.edit)}handleClickOutside(e){if(!this.edit||this.skipFirstClickOutside)return void(this.skipFirstClickOutside=!1);const t=e.target;this.hostElement.contains(t)||!this.inputElement||this.inputElement.contains(t)||(this.save(),this.cancel())}keydownListener(e){this.edit&&("Enter"===e.key?this.save():"Escape"===e.key&&this.cancel())}componentDidLoad(){this.editedValue=this.value}componentDidUpdate(){this.edit&&this.inputElement&&(this.inputElement.focus(),this.inputElement.select())}handleValueChanged(e){this.editedValue=e.target.value}openEditMode(){this.edit=!0,this.editedValue=this.value,this.skipFirstClickOutside=!0}save(){const e=this.value!==this.editedValue;this.value=this.editedValue,this.edit=!1,e&&this.valueChanged.emit(this.value)}cancel(){this.edit=!1,this.editedValue=this.value}render(){return(0,a.h)(a.H,{onDblClick:this.openEditMode,class:"editable-text-field-wrapper"},!this.edit&&(0,a.h)("div",{class:"preview-value"},this.value),this.edit&&(0,a.h)("div",{class:"edit-mode-container"},(0,a.h)("input",{class:"editable-text-field",type:"text",value:this.editedValue,onInput:e=>this.handleValueChanged(e),ref:e=>this.inputElement=e}),(0,a.h)("button",{onClick:()=>this.save(),class:"save-btn",title:this.translationService?this.translationService.translate("yasqe.tab_list.tab_rename.save.btn.label"):""},(0,a.h)("span",{class:"save-btn-label icon-tick"})),(0,a.h)("button",{onClick:()=>this.cancel(),class:"cancel-btn",title:this.translationService?this.translationService.translate("yasqe.tab_list.tab_rename.cancel.btn.label"):""},(0,a.h)("span",{class:"cancel-btn-label icon-close"}))))}get hostElement(){return(0,a.g)(this)}static get watchers(){return{edit:["handleEditModeChange"]}}};s.style=":host{display:flex;flex-direction:row;align-items:stretch}.editable-text-field-wrapper:hover{cursor:pointer}.editable-text-field-wrapper{display:flex;align-items:center}.editable-text-field-wrapper .edit-mode-container{display:flex;justify-content:space-between}.editable-text-field-wrapper .editable-text-field{outline-color:#00000059;border:1px solid #00000059;padding:0}.editable-text-field-wrapper .save-btn,.editable-text-field-wrapper .cancel-btn{border:none;outline:none;margin-left:6px}.editable-text-field-wrapper .save-btn{color:white;background-color:#e84e0f}.editable-text-field-wrapper .save-btn:hover{background-color:#d0460d}.editable-text-field-wrapper .cancel-btn:hover,.editable-text-field-wrapper .save-btn:hover{cursor:pointer}.editable-text-field-wrapper .cancel-btn:hover .cancel-btn-label,.editable-text-field-wrapper .save-btn:hover .save-btn-label{transform:scale(1.2);transition:transform 0.15s ease-out}.editable-text-field-wrapper .preview-value{padding-top:1px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"}};
//# sourceMappingURL=1785.c6198be9a000182096a2.bundle.js.map