(window.webpackJsonp=window.webpackJsonp||[]).push([[306],{341:function(e,t,i){"use strict";i.r(t),i.d(t,"ontotext_editable_text_field",(function(){return s}));var a=i(29);const s=class{constructor(e){Object(a.g)(this,e),this.valueChanged=Object(a.c)(this,"valueChanged",7),this.componentModeChanged=Object(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 Object(a.e)(a.a,{onDblClick:this.openEditMode,class:"editable-text-field-wrapper"},!this.edit&&Object(a.e)("div",{class:"preview-value"},this.value),this.edit&&Object(a.e)("div",{class:"edit-mode-container"},Object(a.e)("input",{class:"editable-text-field",type:"text",value:this.editedValue,onInput:e=>this.handleValueChanged(e),ref:e=>this.inputElement=e}),Object(a.e)("button",{onClick:()=>this.save(),class:"save-btn",title:this.translationService?this.translationService.translate("yasqe.tab_list.tab_rename.save.btn.label"):""},Object(a.e)("span",{class:"save-btn-label icon-tick"})),Object(a.e)("button",{onClick:()=>this.cancel(),class:"cancel-btn",title:this.translationService?this.translationService.translate("yasqe.tab_list.tab_rename.cancel.btn.label"):""},Object(a.e)("span",{class:"cancel-btn-label icon-close"}))))}get hostElement(){return Object(a.d)(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}"}}]);