UNPKG

smart-webcomponents-angular

Version:

[![Price](https://img.shields.io/badge/price-COMMERCIAL-0098f7.svg)](https://jqwidgets.com/license/)

www.htmlelements.com

6 lines (4 loc) • 46.2 kB
1
2
3
4
5
6
/* Smart UI v20.0.2 (2024-09-06) Copyright (c) 2011-2024 jQWidgets. License: https://htmlelements.com/license/ */ // (()=>{Smart("smart-text-area",class extends Smart.Input{static get properties(){return{users:{value:[],type:"array",reflectToAttribute:!1},resize:{value:"none",type:"string"},richText:{value:!1,type:"boolean"},enableHTMLEncode:{value:!0,type:"boolean"},minWidth:{value:0,type:"number"},minHeight:{value:0,type:"number"},toolbarOnFocus:{value:!1,type:"boolean"},uploadSettings:{value:{url:{value:"",type:"string",reflectToAttribute:!1},removeUrl:{value:"",type:"string",reflectToAttribute:!1},existsUrl:{value:"",type:"string",reflectToAttribute:!1},name:{value:"userfile[]",type:"string",reflectToAttribute:!1},uploadMaxCount:{value:5,type:"number",reflectToAttribute:!1},uploadMaxSize:{value:2097152,type:"number",reflectToAttribute:!1},data:{value:null,type:"object",reflectToAttribute:!1},onUploadStarted:{value:null,type:"any",reflectToAttribute:!1},onUploadCompleted:{value:null,type:"any",reflectToAttribute:!1},onUploadRemove:{value:null,type:"any",reflectToAttribute:!1},onUploadError:{value:null,type:"any",reflectToAttribute:!1},onChange:{value:null,type:"any",reflectToAttribute:!1},onProgress:{value:null,type:"any",reflectToAttribute:!1},onAbort:{value:null,type:"any",reflectToAttribute:!1},onError:{value:null,type:"any",reflectToAttribute:!1},onSetHeaders:{value:null,type:"any",reflectToAttribute:!1}},reflectToAttribute:!1,type:"object"},toolbarItems:{value:["bold","italic","underline","strikethrough","fontcolor","backgroundcolor","alignment","orderedlist","unorderedlist","checklist","hyperlink","image","tableheader","clearformat"],reflectToAttribute:!1,type:"array"}}}template(){return'<div id="inputContainer" role="presentation"><textarea class="smart-input" id=\'input\' readonly=\'[[readonly]]\' placeholder=\'[[placeholder]]\' name=\'[[name]]\' value=\'{{value::keyup}}\' disabled=\'[[disabled]]\' aria-label="[[placeholder]]"></textarea><div id="editor"></div><span class="smart-hidden smart-hint" inner-h-t-m-l="[[hint]]" id="span"></span><div id="dropDownButton" tabindex=-1 class="smart-drop-down-button" role="button" aria-label="Toggle popup"><div id="arrow" class="arrow" aria-hidden="true"></div></div></div>'}_blurHandler(){const t=this;t.richText?t.removeAttribute("focus"):super._blurHandler()}_focusHandler(){const t=this;t.richText&&(t.$.editor.component.focus(),setTimeout((()=>{const e=t.$.editor.value;t.$.editor.selectionStart=e.length}))),super._focusHandler()}setHTML(t){const e=this;if(e.richText)return e.$.editor.value=t;this.value=t.replaceAll("<","&lt;").replaceAll(">","&gt;")}getHTML(){const t=this;return t.richText?t.$.editor.component.getHTML():t.value}propertyChangedHandler(t,e,o){const r=this;"value"===t&&r.richText&&(r.$.editor.value=o),"users"===t?(delete r._initMenu,r._mentionMenu&&(r._mentionPlugin&&r._mentionPlugin.destroy(),r._mentionMenu.remove(),r._initUsersMention()),r._renderMentionTrigger()):"resize"===t&&(r.richText?r.$.editor.querySelector(".smart-editor-editable").style.resize=o:r.$.input.style.resize=o,r._mentionTrigger&&("none"!==r.resize?r._mentionTrigger.style.right="10px":r._mentionTrigger.style.right="5px"))}detached(){const t=this;delete t._initMenu,t._mentionMenu&&t._mentionMenu.remove()}findMatches(){const t=this.$.input.value.split("").concat([" "]),e=[];let o="";for(let r in t){let i=t[r],n=t[r-1]||" ",l=[" ","\\n"].indexOf(n)>-1||10===n.charCodeAt(0);("@"===i&&l||o.length)&&" "!==i&&(o+=i),o.length&&" "===i&&(e.push({word:o,index:Math.max(r-o.length,0)}),o="")}return e}getMentions(){const t=this,e=this.findMatches(),o=[];return e.forEach((e=>{t.users.forEach((t=>{const r=e.word.replace("@","");t.name===r&&o.push(t)}))})),o}_initUsersMention(){const t=this;if(t._initMenu)return;t._initMenu=!0;const e=document.createElement("div");e.id=t.id+"_mention_menu",e.classList.add("smart-text-area-mention-menu","smart-hidden"),t._mentionMenu=e,document.body.appendChild(e),t._mentionPlugin=new Smart.Mention(t.richText?t.$.editor:t.$.input,e,(e=>""===e?t.users:t.users.filter((t=>t.name.startsWith(e)))),((t,e)=>t?`${e}${t.name} `:""),((t,e,o)=>{const r=document.createElement("div");return r.setAttribute("role","option"),r.className="smart-text-area-mention-menu-item",o&&(r.classList.add("selected"),r.setAttribute("aria-selected","")),r.textContent=t.name,r.onpointerdown=t=>{t.preventDefault(),e()},r}))}_initRichText(t,e,o){const r=this,i=r,n={};if(!t)return;o||(o={bold:"Bold",italic:"Italic",underline:"Underline",striketrhough:"Strikethrough",alignment:"Alignment",unorderedlist:"Bulleted list",orderedlist:"Numbered list",checklist:"Checklist",paragraph:"Paragraph",format:"Format",image:"Image",h1:"Large Heading",h2:"Medium Heading",h3:"Small Heading",link:"Create link",code:"Code",openLink:"Ctrl + Click to open the link",clearformat:"Clear format",backgroundcolor:"Background Color",fontcolor:"Font Color"});const l=`\n <div class="smart-container">\n <div class="smart-editor-toolbar"> \n <div style="height: auto;" class="smart-editor-toolbar-items-primary">\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.bold}" command="bold" item-name="bold"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.italic}" command="italic" item-name="italic"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.underline}" command="underline" item-name="underline"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.striketrhough}" command="strikethrough" item-name="strikethrough"></div>\n <div style="--item-value: var(--smart-primary);" class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="color-input" tooltip="${o.fontcolor}" command="fontcolor" item-name="fontcolor"><span item-name="fontcolor" class="smart-editor-item-action-button"></span></div>\n <div style="--item-value: var(--smart-secondary);" class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="color-input" tooltip="${o.backgroundcolor}" command="backgroundcolor" item-name="backgroundcolor"><span item-name="backgroundcolor" class="smart-editor-item-action-button"></span></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center smart-arrow-down" item-type="button" item-value="left" item-name="alignment" command="justify" tooltip="${o.alignment}"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.unorderedlist}" command="insertUnorderedList" item-name="unorderedlist"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.orderedlist}" command="insertOrderedList" item-name="orderedlist"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.checklist}" command="insertUnorderedList" item-name="checklist"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.link}" command="hyperlink" item-name="hyperlink"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.image}" command="image" item-name="image"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center smart-arrow-down" item-type="button" item-name="tableheader" tooltip="${o.format}"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.clearformat}" command="removeformat" item-name="clearformat"></div>\n </div>\n </div>\n <div class="smart-editor-content-container">\n <div class="smart-editor-editable" contenteditable="true"></div>\n </div>\n </div>\n `,a=t;a.className="smart-editor smart-rich-textarea",a.style.borderLeftWidth=a.style.borderTopWidth=a.style.borderRightWidth=a.style.borderBottomWidth="0px",a.innerHTML=l;const s=a.querySelector(".smart-editor-editable");s.style.resize=r.resize,r.style.minHeight=r.minHeight+"px",s.style.minHeight=r.minHeight+"px",s.style.minWidth=r.minWidth+"px",t.style.minHeight=r.minHeight+"px",t.style.minWidth=r.minWidth+"px";const d=a.querySelectorAll(".smart-editor-toolbar-item");for(let t=0;t<d.length;t++){const e=d[t],o=e.getAttribute("item-name");-1===r.toolbarItems.indexOf(o)&&e.classList.add("smart-hidden")}if(n.textarea=e,n.tools=[],n.toolbar=a.querySelector(".smart-editor-toolbar"),r.toolbarOnFocus){n.toolbar.id=r.id+"_toolbar";const t=document.createElement("div");t.classList.add("smart-editor"),t.classList.add("smart-editor-toolbar-float"),t.setAttribute("focus",""),t.appendChild(n.toolbar),a.querySelector(".smart-container").setAttribute("toolbar-on-focus",""),r.appendChild(t)}n.contentContainer=a.querySelector(".smart-editor-content-container");const c=document.createElement("div");c.className="smart-editor-tooltip",c.setAttribute("tooltip-position","bottom"),document.body.appendChild(c),n.tooltip=document.querySelector(".smart-editor-tooltip");new ResizeObserver((()=>{if("none"!==r.resize){if(r.style.width=parseInt(s.offsetWidth)+2+"px",r.toolbarOnFocus)return void(r.style.height=parseInt(s.offsetHeight)+2+"px");r.style.height=parseInt(s.offsetHeight)+n.toolbar.offsetHeight+2+"px"}})).observe(s);const u=[],m=(t,e)=>{const o=this,r=new FormData,i=o.uploadSettings.url;let n=!1;const l=files[0],a=o.uploadSettings.data;a&&""!==a&&("string"==typeof a?r.append("postData",a):r.append("postData",JSON.stringify(a))),r.append("fileType",fileType);for(let t=0;t<files.length;t++)r.append(o.uploadSettings.name,files[t]),n=!0;let s=new XMLHttpRequest;s.open("POST",i),o.uploadSettings.onSetHeaders&&"function"==typeof o.uploadSettings.onSetHeaders&&o.uploadSettings.onSetHeaders(s,l),o.uploadSettings.onUploadStarted&&o.uploadSettings.onUploadStarted({files,status:s.status}),s.upload.onprogress=function(t){o.uploadSettings.onProgress&&o.uploadSettings.onProgress(t)},s.onabort=function(t){o.uploadSettings.onAbort&&o.uploadSettings.onAbort(t)},s.onerror=function(t){o.uploadSettings.onError&&o.uploadSettings.onError(t)},s.onload=function(){let t=!1;if(s.response&&("string"==typeof s.response?(t=s.response,t.indexOf("[{")>=0&&(t=JSON.parse(s.response))):t=JSON.parse(s.response)),s.status>=200&&s.status<=299){const r=(t,e)=>{if(t.response&&t.response.response&&"success"!==t.response.response)return null;let o=!1;s.fileURL&&(o=s.file_url);let r={};t&&t.file_url?o=t.file_url:t&&t[0]&&t[0].file_url&&(o=t[0].file_url);let i=!1;t&&t.file_url_small?i=t.file_url_small:t&&t[0]&&t[0].file_url_small&&(i=t[0].file_url_small);let n=!1;t&&t.file_url_medium?n=t.file_url_medium:t&&t[0]&&t[0].file_url_medium&&(n=t[0].file_url_medium);let l=!1;return t&&t.file_url_large?l=t.file_url_large:t&&t[0]&&t[0].file_url_large&&(l=t[0].file_url_large),o&&(r.value=o),i&&(r.small=i),n&&(r.medium=n),l&&(r.large=l),r.label=e,r};for(let e=0;e<files.length;e++){const i=files[e].name?[]:files[e].split("/"),n="url"===fileType?i[i.length-1]:files[e].name;o.uploadSettings.url;const l=r((t.files||t[0]&&t[0].files||[t[0]])[e],n);l&&u.push(l)}e(u,t)}else e(u,t)},s.onreadystatechange=function(){},n&&s.send(r)};d.forEach((e=>{const i=e.getAttribute("item-name");n.tools[i]={element:e,type:"button"},e.onmouseenter=t=>{setTimeout((()=>{const e=t.target.getAttribute("tooltip"),o=t.target.getBoundingClientRect(),i=(n.toolbar.getBoundingClientRect(),t=>t?t.offsetTop+i(t.offsetParent):0),l=t=>t?t.offsetLeft+l(t.offsetParent):0,a=(s=t.target,{left:l(s),top:i(s)});var s;n.tooltip.style.top=5+a.top+o.height+"px",n.tooltip.setAttribute("hover-tooltip",e),n.tooltip.classList.add("open"),n.tooltip.style.left=a.left+o.width/2-n.tooltip.offsetWidth/2+"px",r._tooltipTimer&&clearTimeout(r._tooltipTimer),r._tooltipTimer=setTimeout((()=>{n.tooltip.classList.remove("open")}),1e3)}),150)},e.onmouseleave=()=>{n.tooltip.classList.remove("open")},e.onpointerdown=e=>{const i=e.target.getAttribute("item-name"),l=(e.target.getAttribute("item-value"),e.target.getAttribute("command")),s=e.target.getAttribute("command-value"),d=a.querySelector(".smart-editor-editable"),c=t=>{if(!t||"tableheader"===t){const t=r.toolbarOnFocus?document.querySelector("#"+r.id+'_toolbar [item-name="tableheader"]'):a.querySelector('[item-name="tableheader"]');t._popup&&(t._popup.remove(),delete t._popup)}if(!t||"alignment"===t){const t=r.toolbarOnFocus?document.querySelector("#"+r.id+'_toolbar [item-name="alignment"]'):a.querySelector('[item-name="alignment"]');t._popup&&(t._popup.remove(),delete t._popup)}if(!t||"fontcolor"===t){const t=r.toolbarOnFocus?document.querySelector("#"+r.id+'_toolbar [item-name="fontcolor"]'):a.querySelector('[item-name="fontcolor"]');t._popup&&(t._popup.remove(),delete t._popup)}if(!t||"backgroundcolor"===t){const t=r.toolbarOnFocus?document.querySelector("#"+r.id+'_toolbar [item-name="backgroundcolor"]'):a.querySelector('[item-name="backgroundcolor"]');t._popup&&(t._popup.remove(),delete t._popup)}};if("tableheader"!==i)if("fontcolor"!==i&&"backgroundcolor"!==i)if("alignment"!==i){switch(c(),e.target.hasAttribute("checked")?e.target.removeAttribute("checked"):e.target.setAttribute("checked",""),i){case"bold":case"italic":case"underline":case"strikethrough":case"unorderedlist":case"checklist":case"orderedlist":d.getRootNode().execCommand(l,!1,null);break;case"removeformat":case"clearformat":d.getRootNode().execCommand("removeformat",!1,null);break;case"image":{const e=document.createElement("input");e.type="file",e.accept="image/jpeg, image/png, image/gif",e.hidden=!0,document.body.appendChild(e);n._getSelectionRange();d.getRootNode().execCommand("insertHTML",!1,'<img style="max-width: 100%;" class="smart-hidden" id="targetImage"/>'),e.click(),e.onchange=()=>{const o=d.getRootNode().getElementById("targetImage"),i=e.files[0];o.id="",o.classList.add("smart-hidden");const n=new FileReader;n.addEventListener("load",(function(){o.src=n.result,o.classList.remove("smart-hidden")})),i&&n.readAsDataURL(i),r.uploadSettings.uploadUrl&&m(0,(e=>{e&&e.length&&(o.src=e[0].medium||e[0].value,o.classList.remove("smart-hidden"),t.imgArray||(t.imgArray=[]),t.imgArrayId||(t.imgArrayId=[]),t.imgArray.push(o.src),t.imgArrayId[o.src]=e[0])}))};break}case"hyperlink":{const t=n._getSelectionRange();let e,r=t.startContainer;r&&"a"!==r.nodeName.toLowerCase()&&(r=r.parentElement);let i=!1;r&&"a"===r.nodeName.toLowerCase()?(e=r.textContent,i=!0):e=t.toString(),i?(r.remove(),d.getRootNode().execCommand("insertHTML",!1,e)):e&&(d.getRootNode().execCommand("insertHTML",!1,'<a title="'+o.openLink+'" href="https://'+e.trim()+'">'+e+"</a>"),setTimeout((()=>{let t=n._getSelectionRange().startContainer;t&&"a"!==t.nodeName.toLowerCase()&&(t=t.parentElement),t&&"a"===t.nodeName.toLowerCase()&&(t.onmouseenter=e=>{e.ctrlKey&&t.classList.add("ctrl")},t.onmousemove=e=>{e.ctrlKey&&t.classList.add("ctrl")},t.onmouseleave=()=>{t.classList.remove("ctrl")})}),50));break}case"h1":case"h2":case"h3":case"p":case"pre":case"justify":case"formats":d.getRootNode().execCommand(l,!1,s)}if("checklist"===i){const t=window.getSelection();if(t.focusNode){const e=t.focusNode.parentElement.closest("ul");e&&e.setAttribute("checklist","")}}e.preventDefault()}else{e.preventDefault(),c("fontcolor"),c("backgroundcolor"),c("tableheader");const t=r.toolbarOnFocus?document.querySelector("#"+r.id+'_toolbar [item-name="alignment"]'):a.querySelector('[item-name="alignment"]');if(t._popup)t._popup.remove(),delete t._popup;else{t._popup=document.createElement("div");const e=t._popup;document.body.appendChild(e),e.style.position="absolute",e.style.height="auto",e.style.width="30px",e.style.background="var(--smart-background)",e.style.borderStyle="solid",e.style.borderWidth="1px",e.style.borderColor="var(--smart-border)",e.style.boxShadow="var(--smart-elevation-8)",e.style.zIndex=99999;const r=t.getBoundingClientRect();e.style.top=r.bottom+"px",e.style.left=r.left+"px",e.innerHTML=`\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.alignLeft}" command="justify" command-value="Left" item-name="alignment" item-value="left"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.alignCenter}" command="justify" command-value="Center" item-name="alignment" item-value="center"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.alignRight}" command="justify" command-value="Right" item-name="alignment" item-value="right"></div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.alignJustify}" command="justify" command-value="Full" item-name="alignment" item-value="justify"></div>\n `,e.querySelectorAll(".smart-button").forEach((e=>{e.onpointerdown=e=>{t._popup.remove(),delete t._popup;const o=e.target.getAttribute("command"),r=e.target.getAttribute("command-value");a.querySelector(".smart-editor-editable").getRootNode().execCommand(o+r,!1,null),e.preventDefault()}}))}}else{e.preventDefault(),c();const t=r.toolbarOnFocus?document.querySelector("#"+r.id+'_toolbar [item-name="'+i+'"]'):a.querySelector('[item-name="'+i+'"]');if(t._popup)t._popup.remove(),delete t._popup;else{t._popup=document.createElement("div");const e=t._popup;document.body.appendChild(e),e.style.position="absolute",e.style.height="auto",e.style.width="auto",e.style.background="var(--smart-background)",e.style.borderStyle="solid",e.style.borderWidth="1px",e.style.borderColor="var(--smart-border)",e.style.boxShadow="var(--smart-elevation-8)",e.style.zIndex=99999;const o=t.getBoundingClientRect();e.style.top=o.bottom+"px",e.style.left=o.left+"px",e.innerHTML="<style>\n \n.smart-editor-color-picker table {\n margin: 0;\n padding: 4px 4px 4px;\n empty-cells: show;\n border-collapse: separate;\n}\n\n.smart-editor-color-picker td {\n border-collapse: separate;\n border: 1px solid transparent;\n cursor: pointer;\n margin: 0;\n position: relative;\n}\n\n.smart-editor-color-picker td:hover {\n border: 1px solid #000;\n}\n\n.smart-editor-color-picker-selected-cell {\n outline: 1px solid #000;\n}\n\n.smart-editor-color-picker td div {\n width: 16px;\n height: 16px;\n}\n </style>",e.innerHTML+='<div tool-name="'+i+'" class="smart-editor-color-picker"><div role="grid"><table class="smart-editor-color-picker-table" cellspacing="0" cellpadding="0"><tbody><tr><td aria-label="RGB (0, 0, 0)"><div title="RGB (0, 0, 0)" style="background-color: rgb(0, 0, 0);"></div></td><td aria-label="RGB (68, 68, 68)"><div title="RGB (68, 68, 68)" style="background-color: rgb(68, 68, 68);"></div></td><td aria-label="RGB (102, 102, 102)"><div title="RGB (102, 102, 102)" style="background-color: rgb(102, 102, 102);"></div></td><td aria-label="RGB (153, 153, 153)"><div title="RGB (153, 153, 153)" style="background-color: rgb(153, 153, 153);"></div></td><td aria-label="RGB (204, 204, 204)"><div title="RGB (204, 204, 204)" style="background-color: rgb(204, 204, 204);"></div></td><td aria-label="RGB (238, 238, 238)"><div title="RGB (238, 238, 238)" style="background-color: rgb(238, 238, 238);"></div></td><td aria-label="RGB (243, 243, 243)"><div title="RGB (243, 243, 243)" style="background-color: rgb(243, 243, 243);"></div></td><td aria-label="RGB (255, 255, 255)"><div title="RGB (255, 255, 255)" style="background-color: rgb(255, 255, 255);"></div></td></tr></tbody></table></div><div role="grid"><table class="smart-editor-color-picker-table" cellspacing="0" cellpadding="0"><tbody><tr><td aria-label="RGB (255, 0, 0)"><div title="RGB (255, 0, 0)" style="background-color: rgb(255, 0, 0);"></div></td><td aria-label="RGB (255, 153, 0)"><div title="RGB (255, 153, 0)" style="background-color: rgb(255, 153, 0);"></div></td><td aria-label="RGB (255, 255, 0)"><div title="RGB (255, 255, 0)" style="background-color: rgb(255, 255, 0);"></div></td><td aria-label="RGB (0, 255, 0)"><div title="RGB (0, 255, 0)" style="background-color: rgb(0, 255, 0);"></div></td><td aria-label="RGB (0, 255, 255)"><div title="RGB (0, 255, 255)" style="background-color: rgb(0, 255, 255);"></div></td><td aria-label="RGB (0, 0, 255)"><div title="RGB (0, 0, 255)" style="background-color: rgb(0, 0, 255);"></div></td><td aria-label="RGB (153, 0, 255)"><div title="RGB (153, 0, 255)" style="background-color: rgb(153, 0, 255);"></div></td><td aria-label="RGB (255, 0, 255)"><div title="RGB (255, 0, 255)" style="background-color: rgb(255, 0, 255);"></div></td></tr></tbody></table></div><div role="grid"><table class="smart-editor-color-picker-table" cellspacing="0" cellpadding="0"><tbody><tr><td aria-label="RGB (244, 204, 204)"><div title="RGB (244, 204, 204)" style="background-color: rgb(244, 204, 204);"></div></td><td aria-label="RGB (252, 229, 205)"><div title="RGB (252, 229, 205)" style="background-color: rgb(252, 229, 205);"></div></td><td aria-label="RGB (255, 242, 204)"><div title="RGB (255, 242, 204)" style="background-color: rgb(255, 242, 204);"></div></td><td aria-label="RGB (217, 234, 211)"><div title="RGB (217, 234, 211)" style="background-color: rgb(217, 234, 211);"></div></td><td aria-label="RGB (208, 224, 227)"><div title="RGB (208, 224, 227)" style="background-color: rgb(208, 224, 227);"></div></td><td aria-label="RGB (207, 226, 243)"><div title="RGB (207, 226, 243)" style="background-color: rgb(207, 226, 243);"></div></td><td aria-label="RGB (217, 210, 233)"><div title="RGB (217, 210, 233)" style="background-color: rgb(217, 210, 233);"></div></td><td aria-label="RGB (234, 209, 220)"><div title="RGB (234, 209, 220)" style="background-color: rgb(234, 209, 220);"></div></td></tr><tr><td id="T-Kw-Jn88" aria-label="RGB (234, 153, 153)"><div title="RGB (234, 153, 153)" style="background-color: rgb(234, 153, 153);"></div></td><td aria-label="RGB (249, 203, 156)"><div title="RGB (249, 203, 156)" style="background-color: rgb(249, 203, 156);"></div></td><td aria-label="RGB (255, 229, 153)"><div title="RGB (255, 229, 153)" style="background-color: rgb(255, 229, 153);"></div></td><td aria-label="RGB (182, 215, 168)"><div title="RGB (182, 215, 168)" style="background-color: rgb(182, 215, 168);"></div></td><td aria-label="RGB (162, 196, 201)"><div title="RGB (162, 196, 201)" style="background-color: rgb(162, 196, 201);"></div></td><td aria-label="RGB (159, 197, 232)"><div title="RGB (159, 197, 232)" style="background-color: rgb(159, 197, 232);"></div></td><td aria-label="RGB (180, 167, 214)"><div title="RGB (180, 167, 214)" style="background-color: rgb(180, 167, 214);"></div></td><td aria-label="RGB (213, 166, 189)"><div title="RGB (213, 166, 189)" style="background-color: rgb(213, 166, 189);"></div></td></tr><tr><td aria-label="RGB (224, 102, 102)"><div title="RGB (224, 102, 102)" style="background-color: rgb(224, 102, 102);"></div></td><td aria-label="RGB (246, 178, 107)"><div title="RGB (246, 178, 107)" style="background-color: rgb(246, 178, 107);"></div></td><td aria-label="RGB (255, 217, 102)"><div title="RGB (255, 217, 102)" style="background-color: rgb(255, 217, 102);"></div></td><td aria-label="RGB (147, 196, 125)"><div title="RGB (147, 196, 125)" style="background-color: rgb(147, 196, 125);"></div></td><td aria-label="RGB (118, 165, 175)"><div title="RGB (118, 165, 175)" style="background-color: rgb(118, 165, 175);"></div></td><td aria-label="RGB (111, 168, 220)"><div title="RGB (111, 168, 220)" style="background-color: rgb(111, 168, 220);"></div></td><td aria-label="RGB (142, 124, 195)"><div title="RGB (142, 124, 195)" style="background-color: rgb(142, 124, 195);"></div></td><td aria-label="RGB (194, 123, 160)"><div title="RGB (194, 123, 160)" style="background-color: rgb(194, 123, 160);"></div></td></tr><tr><td id="T-Kw-Jn104" aria-label="RGB (204, 0, 0)"><div title="RGB (204, 0, 0)" style="background-color: rgb(204, 0, 0);"></div></td><td aria-label="RGB (230, 145, 56)"><div title="RGB (230, 145, 56)" style="background-color: rgb(230, 145, 56);"></div></td><td aria-label="RGB (241, 194, 50)"><div title="RGB (241, 194, 50)" style="background-color: rgb(241, 194, 50);"></div></td><td aria-label="RGB (106, 168, 79)"><div title="RGB (106, 168, 79)" style="background-color: rgb(106, 168, 79);"></div></td><td aria-label="RGB (69, 129, 142)"><div title="RGB (69, 129, 142)" style="background-color: rgb(69, 129, 142);"></div></td><td aria-label="RGB (61, 133, 198)"><div title="RGB (61, 133, 198)" style="background-color: rgb(61, 133, 198);"></div></td><td aria-label="RGB (103, 78, 167)"><div title="RGB (103, 78, 167)" style="background-color: rgb(103, 78, 167);"></div></td><td aria-label="RGB (166, 77, 121)"><div title="RGB (166, 77, 121)" style="background-color: rgb(166, 77, 121);"></div></td></tr><tr><td aria-label="RGB (153, 0, 0)"><div title="RGB (153, 0, 0)" style="background-color: rgb(153, 0, 0);"></div></td><td aria-label="RGB (180, 95, 6)"><div title="RGB (180, 95, 6)" style="background-color: rgb(180, 95, 6);"></div></td><td aria-label="RGB (191, 144, 0)"><div title="RGB (191, 144, 0)" style="background-color: rgb(191, 144, 0);"></div></td><td aria-label="RGB (56, 118, 29)"><div title="RGB (56, 118, 29)" style="background-color: rgb(56, 118, 29);"></div></td><td aria-label="RGB (19, 79, 92)"><div title="RGB (19, 79, 92)" style="background-color: rgb(19, 79, 92);"></div></td><td aria-label="RGB (11, 83, 148)"><div title="RGB (11, 83, 148)" style="background-color: rgb(11, 83, 148);"></div></td><td aria-label="RGB (53, 28, 117)"><div title="RGB (53, 28, 117)" style="background-color: rgb(53, 28, 117);"></div></td><td aria-label="RGB (116, 27, 71)"><div title="RGB (116, 27, 71)" style="background-color: rgb(116, 27, 71);"></div></td></tr><tr><td aria-label="RGB (102, 0, 0)"><div title="RGB (102, 0, 0)" style="background-color: rgb(102, 0, 0);"></div></td><td aria-label="RGB (120, 63, 4)"><div title="RGB (120, 63, 4)" style="background-color: rgb(120, 63, 4);"></div></td><td aria-label="RGB (127, 96, 0)"><div title="RGB (127, 96, 0)" style="background-color: rgb(127, 96, 0);"></div></td><td aria-label="RGB (39, 78, 19)"><div title="RGB (39, 78, 19)" style="background-color: rgb(39, 78, 19);"></div></td><td aria-label="RGB (12, 52, 61)"><div title="RGB (12, 52, 61)" style="background-color: rgb(12, 52, 61);"></div></td><td aria-label="RGB (7, 55, 99)"><div title="RGB (7, 55, 99)" style="background-color: rgb(7, 55, 99);"></div></td><td aria-label="RGB (32, 18, 77)"><div title="RGB (32, 18, 77)" style="background-color: rgb(32, 18, 77);"></div></td><td aria-label="RGB (76, 17, 48)"><div title="RGB (76, 17, 48)" style="background-color: rgb(76, 17, 48);"></div></td></tr></tbody></table></div></div>',e.querySelectorAll("td div").forEach((e=>{e.onpointerdown=e=>{const o=e.target.closest(".smart-editor-color-picker").getAttribute("tool-name");t._popup.remove(),delete t._popup;const r=(t=>{if(t){if("#"===t.substr(0,1))return 4===t.length?"#"+(o=t.substr(1,1))+o+(r=t.substr(2,1))+r+(i=t.substr(3,1))+i:t;var e=/(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/i.exec(t);if(!e)return null;var o=parseInt(e[2],10).toString(16),r=parseInt(e[3],10).toString(16),i=parseInt(e[4],10).toString(16);return"#"+((1===o.length?"0"+o:o)+(1===r.length?"0"+r:r)+(1===i.length?"0"+i:i))}return null})(e.target.style.backgroundColor),i=a.querySelector(".smart-editor-editable");"fontcolor"===o?i.getRootNode().execCommand("forecolor",!1,r):i.getRootNode().execCommand("backcolor",!1,r),e.preventDefault()}}))}}else{e.preventDefault(),c("alignment"),c("fontcolor"),c("backgroundcolor");const t=r.toolbarOnFocus?document.querySelector("#"+r.id+'_toolbar [item-name="tableheader"]'):a.querySelector('[item-name="tableheader"]');if(t._popup)t._popup.remove(),delete t._popup;else{t._popup=document.createElement("div");const e=t._popup;document.body.appendChild(e),e.style.position="absolute",e.style.height="auto",e.style.width="70px",e.style.background="var(--smart-background)",e.style.borderStyle="solid",e.style.borderWidth="1px",e.style.borderColor="var(--smart-border)",e.style.boxShadow="var(--smart-elevation-8)",e.style.zIndex=99999;const r=t.getBoundingClientRect();e.style.top=r.bottom+"px",e.style.left=r.left-20+"px",e.innerHTML=`\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.paragraph}" command="insertParagraph" command-value="p" item-name="p">P</div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.h1}" command="formatBlock" command-value="H1" item-name="h1">H1</div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.h2}" command="formatBlock" command-value="H2" item-name="h2">H2</div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.h3}" command="formatBlock" command-value="H3" item-name="h3">H3</div>\n <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.code}" command="formatBlock" command-value="pre" item-name="pre">Code</div> \n `,e.querySelectorAll(".smart-button").forEach((e=>{e.onpointerdown=e=>{t._popup.remove(),delete t._popup;const o=e.target.getAttribute("command"),r=e.target.getAttribute("command-value");a.querySelector(".smart-editor-editable").getRootNode().execCommand(o,!1,r),e.preventDefault()}}))}}}}));const p=a.querySelector(".smart-editor-editable");n.content=p,n.content.innerHTML="<div>"+e.value+"&#8203;</div>";const b=(t,o)=>{const r=n;return void 0===t&&(t=e.value),t=!o&&r.enableHtmlEncode?t.replaceAll("<","&lt;").replaceAll(">","&gt;"):t.replaceAll("&lt;","<").replaceAll("&gt;",">")};t.component=n;const g=(t,e)=>{var o=e(t);for(t=t.firstChild;!1!==o&&t;t=t.nextSibling)o=g(t,e);return o};n.getCaretPosition=t=>{var e=window.getSelection(),o=[0,0];if(e.anchorNode===t)o=[e.anchorOffset,e.extentOffset];else{var r=[e.anchorNode,e.extentNode];if(!t.contains(e.anchorNode)||!t.contains(e.extentNode))return;var i,n=[0,0];g(t,(function(t){for(i=0;i<2;i++)if(t==r[i]&&(n[i]=!0,n[0==i?1:0]))return!1;if(t.textContent&&!t.firstChild)for(i=0;i<2;i++)n[i]||(o[i]+=t.textContent.length)})),o[0]+=e.anchorOffset,o[1]+=e.extentOffset}return o[0]<=o[1]?o:[o[1],o[0]]},n.setCaretPosition=t=>{if(t>=0){const e=window.getSelection(),o=(t,e,r)=>{if(r||((r=document.createRange()).selectNode(t),r.setStart(t,0)),0===e.count)r.setEnd(t,e.count);else if(t&&e.count>0)if(t.nodeType===Node.TEXT_NODE)t.textContent.length<e.count?e.count-=t.textContent.length:(r.setEnd(t,e.count),e.count=0);else for(var i=0;i<t.childNodes.length&&(r=o(t.childNodes[i],e,r),0!==e.count);i++);return r},r=o(a.querySelector(".smart-editor-editable"),{count:t});r&&(r.collapse(!1),e.removeAllRanges(),e.addRange(r))}},n.execCommand=(t,e)=>{const o=p.getRootNode();o&&o.execCommand(t,!1,e)},Object.defineProperty(t,"selectionStart",{configurable:!1,enumerable:!0,get(){e.value=n.content.textContent;const t=n.getCaretPosition(n.content);return void 0!==t?t[1]:0},set(t){n.setCaretPosition(t)}}),Object.defineProperty(t,"value",{configurable:!1,enumerable:!0,get:()=>(e.value=n.content.textContent,n._getInputValue()),set(t){n.content.innerHTML!==t&&(n.content.innerHTML="<div>"+t+"&#8203;</div>",e.value=t,i.set("value",e.value,!1),n.setCaretPosition(n.content.textContent.length-1))}});const h=t=>{const e=n.content;for(;t&&t!==e;){const e=t.style.backgroundColor;if(e)return e;t=t.parentElement}};return n._getSelectionRange=()=>{const t=n;return t._selectionRange||t._setSelectionRange(),t._selectionRange},n._setSelectionRange=(t,e,o)=>{const r=n;let i=a.querySelector(".smart-editor-editable");const l=window.getSelection();let s;if(t){if(s=document.createRange(),"number"==typeof e&&"number"==typeof o)try{s.setStart(t,parseInt(e)),s.setEnd(t,parseInt(o))}catch(e){s.selectNodeContents(t)}else"img"===t.nodeName.toLowerCase()||t.classList.contains("smart-editor-video-container")?(s.setStartBefore(t),s.setEndAfter(t),s.selectNode(t)):s.selectNodeContents(t);l.removeAllRanges(),l.addRange(s)}else l.rangeCount&&(s=l.getRangeAt(0));try{s&&s.startContainer&&i.contains(s.startContainer)&&(n._selectionRange=s)}catch(t){}r._selectionRange||(s=document.createRange(),s.selectNodeContents(i),s.collapse(!0),n._selectionRange=s)},n._getNodeFromList=(t,e)=>{const o=n.content;if(t&&e)for(;t&&t!==o;){const o=t.nodeName.toLocaleLowerCase();if(e.indexOf(o)>-1)return o;t=t.parentElement}},n._setItemValue=(t,e)=>{const o=n;let r=e.value;t&&e&&("button"===e.type?r?(t.setAttribute("checked",""),t.setAttribute("aria-pressed",!0)):(t.removeAttribute("checked"),t.setAttribute("aria-pressed",!1)):(r||"color-input"!==e.type?["fontname","formats"].indexOf(e.name)>-1&&(r=o.localize(e.value)||e.label||e.value):r="transparent",r?(t.setAttribute("item-value",r),t.style.setProperty("--item-value",r)):(t.removeAttribute("item-value"),t.style.removeProperty("--item-value"))))},n._getInputValue=b,n._updateToolbarItems=t=>{const e=n,o=e._getSelectionRange();if(!o)return;const r=e.content;let i,l=o.startOffset>o.endOffset?o.endContainer:o.startContainer;if(l&&(l.closest||(l=l.parentElement),l&&l.closest)){t||(t=["alignment","bold","hyperlink","italic","strikethrough","underline","fontsize","fontname","formats","fontcolor","backgroundcolor","orderedlist","unorderedlist","image","checklist","subscript","superscript","h1","h2","h3","code","pre","clearformat"]);for(let o=0,n=t.length;o<n;o+=1){const n=t[o],a=e.tools[n];if(a){let t;if("alignment"===n)t=l.style.textAlign;else if("bold"===n)t=!!e._getNodeFromList(l,["b","strong","h4","h5","h6"]);else if("hyperlink"===n)t=!!e._getNodeFromList(l,["a"]);else if("h1"===n)t=!!e._getNodeFromList(l,["h1"]);else if("h2"===n)t=!!e._getNodeFromList(l,["h2"]);else if("h3"===n)t=!!e._getNodeFromList(l,["h3"]);else if("pre"===n)t=!!e._getNodeFromList(l,["pre"]);else if("p"===n)t=!!e._getNodeFromList(l,["p"]);else if("italic"===n)t=!!e._getNodeFromList(l,["i"]);else if("underline"===n)t=!!e._getNodeFromList(l,["u"]);else if("strikethrough"===n)t=!!e._getNodeFromList(l,["strike"]);else if("fontsize"===n){const e=l.closest(".smart-editor-editable font");e&&(t=e.style.fontSize),t||(i||(i=window.getComputedStyle(l)),t=i.fontSize),t=parseInt(t),isNaN(t)&&(t="")}else if("fontname"===n){const e=l.closest(".smart-editor-editable font");e&&e.hasAttribute("face")?t=e.getAttribute("face"):(i||(i=window.getComputedStyle(l)),t=i.fontFamily.split(",")[0])}else if("formats"===n&&l!==r){const o=["h1","h2","h3","p","pre"];if(t="",o){const r=o;t=e._getNodeFromList(l,r)||""}}else if("fontcolor"===n){const e=l.closest(".smart-editor-editable font");e?t=e.color:(i||(i=window.getComputedStyle(l)),t=i.color),a.type="colorInput"}else if("backgroundcolor"===n)t=h(l),t||(i||(i=window.getComputedStyle(l)),t=i.backgroundColor),a.type="colorInput";else if("orderedlist"===n||"unorderedlist"===n){t=!!l.closest(`.smart-editor-editable ${"orderedlist"===n?"ol":"ul"} li`);const e=l.closest(`.smart-editor-editable ${"orderedlist"===n?"ol":"ul"} li`);e&&e.parentElement&&e.parentElement.hasAttribute("checklist")&&(t=!1)}else if("checklist"===n){const e=l.closest(`.smart-editor-editable ${"orderedlist"===n?"ol":"ul"} li`);e&&e.parentElement.hasAttribute("checklist")&&(t=!0)}else"subscript"===n?t=!!l.closest(".smart-editor-editable sub"):"superscript"===n?t=!!l.closest(".smart-editor-editable sup"):"clearformat"===n&&(t=!1);if(!t&&a.dataSource){const e=a.dataSource[0];e&&(t=e.value||e)}null!==t&&(a.value=t,e._setItemValue(e.toolbar.querySelector(`.smart-editor-toolbar-item[item-name=${n}]`),a))}}}},n._getTextFromCarret=()=>{const t=n._getSelectionRange(),e=t.startContainer,o=e.textContent;let r,i;if(!t.toString()&&o.length>0&&o.indexOf(" ")>-1){const e=o.slice(0,t.startOffset).lastIndexOf(" ")+1;let n=o.slice(t.endOffset).indexOf(" ");n<0&&(n=o.length-1),r=e>-1?e:t.startOffset,i=Math.max(t.endOffset,t.endOffset+n)}else r=0,i=e.length;return{selectionStartIndex:r,selectionEndIndex:i}},n.focus=()=>{p.focus()},n.blur=()=>{p.blur()},n.getHTML=()=>b(n.content.innerHTML),p.onpointerup=t=>{const e=n,o=t.target;if(e._setSelectionRange(),e._updateToolbarItems(),t.ctrlKey){let t=e._getSelectionRange().startContainer;t&&"a"!==t.nodeName.toLowerCase()&&(t=t.parentElement),t&&"a"===t.nodeName.toLowerCase()&&window.open(t.href,"_blank")}if(o&&"LI"===o.nodeName&&o.closest("UL[checklist]")){const t=e._getSelectionRange();t&&0===t.startOffset&&0===t.endOffset&&(o.hasAttribute("checked")?o.removeAttribute("checked"):o.setAttribute("checked",""))}},p.onpaste=()=>{const t=n;t._setSelectionRange(),t._updateToolbarItems(),e.value=t.content.textContent,i.set("value",e.value,!1)},p.oninput=t=>{const o=n;o._setSelectionRange(),o._updateToolbarItems();const r=e.value;e.value=o.content.textContent,i.set("value",e.value,!1),i.$.fireEvent("input",{value:e.value,oldValue:r,html:n.getHTML()}),t.stopPropagation()},p.onkeydown=t=>{const e=n;e._setSelectionRange(),e._updateToolbarItems();let o=n._getSelectionRange().startContainer;o&&"a"!==o.nodeName.toLowerCase()&&(o=o.parentElement),o&&"a"===o.nodeName.toLowerCase()&&t.ctrlKey&&o.classList.add("ctrl")},p.onkeyup=()=>{const t=n;t._setSelectionRange(),t._updateToolbarItems(),e.value=t.content.textContent,i.set("value",e.value,!1)},p.onfocus=()=>{a.setAttribute("focus",""),i.toolbarOnFocus&&n.toolbar.parentElement.classList.add("show")},p.onblur=()=>{const o=n;a.removeAttribute("focus");const r=e.value;e.value=o.content.textContent,i.set("value",e.value,!1),i.toolbarOnFocus&&n.toolbar.parentElement.classList.remove("show"),n.tooltip.classList.remove("open"),i.$.fireEvent("change",{value:e.value,oldValue:r,html:n.getHTML()}),o.content.querySelector("img")&&i.uploadSettings.uploadUrl&&i.uploadSettings.removeUrl&&o.content.querySelectorAll("img").forEach((e=>{if(t.imgArray&&-1===t.imgArray.indexOf(e.src)&&t.uploadSettings.removeUrl){let o=new FormData,r=new XMLHttpRequest;if(o.append(t.uploadSettings.name,e.src),t.imgArrayId[e.src]){const r=t.imgArrayId[e.src].small,i=t.imgArrayId[e.src].medium,n=t.imgArrayId[e.src].large,l=t.imgArrayId[e.src].value;r&&o.append(t.uploadSettings.name+"_small",r),i&&o.append(t.uploadSettings.name+"_medium",i),n&&o.append(t.uploadSettings.name+"_large",n),l&&o.append(t.uploadSettings.name+"_value",l)}r.open("POST",t.uploadSettings.removeUrl),r.send(o)}}))},document.addEventListener("selectionchange",(t=>{const e=n;if(!t.target.getSelection)return;const o=t.target.getSelection().focusNode;e.contentContainer.contains(o)&&(e._setSelectionRange(),e._updateToolbarItems())})),n}render(){const t=this;if(super.render(),t.richText)t._initRichText(t.$.editor,t.$.input);else{new ResizeObserver((()=>{"none"!==t.resize&&(t.style.width=parseInt(t.$.input.offsetWidth)+2+"px",t.style.height=parseInt(t.$.input.offsetHeight)+2+"px")})).observe(t.$.input),t.$.input.style.resize=t.resize}t._initUsersMention(),t._renderMentionTrigger(),t.classList.add("smart-input")}_renderMentionTrigger(){const t=this;if(!this.richText&&t.users&&t.users.length){t.setAttribute("has-users","");const e=document.createElement("span");e.innerHTML="@",e.style.position="absolute",e.classList.add("smart-hidden"),e.classList.add("smart-mention-trigger"),e.style.bottom="3px","none"!==t.resize?e.style.right="10px":e.style.right="5px",e.style.cursor="pointer",e.onpointerdown=e=>{const o=this.$.input.selectionEnd,r=this.$.input.value.slice(0,o),i=this.$.input.value.substring(o);return t.richText?(t.$.editor.component.execCommand("insertHTML","@"),this.$.editor.dispatchEvent(new Event("input")),void e.preventDefault()):r.length>1&&r.substring(r.length-2).indexOf("@")>=0?(this.$.input.dispatchEvent(new Event("input")),void e.preventDefault()):(r.length>0?(this.$.input.value=r+" @"+i,this.$.input.selectionStart=this.$.input.selectionEnd=o+2):0===t.$.input.selectionStart&&(this.$.input.value=r+"@ "+i,this.$.input.selectionStart=this.$.input.selectionEnd=1),this.$.input.dispatchEvent(new Event("input")),void e.preventDefault())},t._mentionTrigger=e,t.addEventListener("focus",(()=>{e.classList.remove("smart-hidden"),t._mentionPlugin&&t._mentionPlugin.refreshMenu()})),t.addEventListener("blur",(()=>{e.classList.add("smart-hidden"),t._mentionPlugin&&t._mentionPlugin.refreshMenu()})),t.onmouseenter=()=>{e.classList.remove("smart-hidden")},t.onmouseleave=()=>{e.classList.add("smart-hidden")},t.$.inputContainer.appendChild(e)}}});const t=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];function e(e,o){const r=document.createElement("div");document.body.appendChild(r);const i=r.style;let n=getComputedStyle(e);if(e.className.indexOf("smart-editor")>=0){const t=e.querySelector(".smart-editor-editable");n=getComputedStyle(t)}i.whiteSpace="pre-wrap",i.wordWrap="break-word",i.position="absolute",i.visibility="hidden",t.forEach((t=>{i[t]=n[t]})),i.overflow="hidden",r.textContent=e.value.substring(0,o);const l=document.createElement("span");l.textContent=e.value.substring(o)||".",r.appendChild(l);const a={top:l.offsetTop+parseInt(n.borderTopWidth),left:l.offsetLeft+parseInt(n.borderLeftWidth),height:l.offsetHeight};if(e.className.indexOf("smart-editor")>=0){const t=e.getBoundingClientRect(),o=window.getSelection().getRangeAt(0).getClientRects()[0];o&&t&&(a.left=o.left-t.left,a.top=o.top-t.top)}return r.remove(),a}Smart.Mention=class{constructor(t,e,o,r,i){this.ref=t,this.menuRef=e,this.resolveFn=o,this.replaceFn=r,this.menuItemFn=i,this.options=[],this.makeOptions=this.makeOptions.bind(this),this.closeMenu=this.closeMenu.bind(this),this.selectItem=this.selectItem.bind(this),this.onInput=this.onInput.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.renderMenu=this.renderMenu.bind(this),this.ref.addEventListener("input",this.onInput),this.ref.addEventListener("keydown",this.onKeyDown)}destroy(){this.ref.removeEventListener("input",this.onInput),this.ref.removeEventListener("keydown",this.onKeyDown)}async makeOptions(t){const e=await this.resolveFn(t);0!==e.lenght?(this.options=e,this.renderMenu()):this.closeMenu()}closeMenu(){setTimeout((()=>{this.options=[],this.left=void 0,this.top=void 0,this.triggerIdx=void 0,this.renderMenu()}),0)}selectItem(t){return()=>{const e=this.ref.value.substr(0,this.triggerIdx),o=this.options[t],r=this.replaceFn(o,this.ref.value[this.triggerIdx]),i=this.ref.value.substr(this.ref.selectionStart),n=`${e}${r}${i}`;-1!==this.ref.className.indexOf("smart-editor")?this.ref.component.execCommand("insertHTML",o.name):(this.ref.value=n,this.ref.ownerElement&&(this.ref.ownerElement.value=n));const l=this.ref.value.length-i.length;-1===this.ref.className.indexOf("smart-editor")?this.ref.setSelectionRange(l,l):this.ref.selectionStart=l,this.ref.dispatchEvent(new Event("input")),this.closeMenu(),this.ref.focus()}}onInput(t){const o=this.ref.selectionStart,r=this.ref.value.slice(0,o),i=r.split(/\s/),n=i[i.length-1],l=r.endsWith(n)?r.length-n.length:-1;if(!("@"===r[l]))return void this.closeMenu();const a=r.slice(l+1);this.makeOptions(a);const s=e(this.ref,o),{top:d,left:c}=this.ref.getBoundingClientRect();setTimeout((()=>{this.active=0,this.left=window.scrollX+s.left+c+this.ref.scrollLeft,this.top=window.scrollY+s.top+d+s.height-this.ref.scrollTop,this.triggerIdx=l,this.renderMenu()}),0)}refreshMenu(){void 0!==this.triggerIdx&&null!==this.triggerIdx&&(this.ref===document.activeElement?this.triggerIdx&&this.menuRef.classList.remove("smart-hidden"):this.menuRef.classList.add("smart-hidden"),setTimeout((()=>{const t=this.ref.selectionStart,o=e(this.ref,t),{top:r,left:i}=this.ref.getBoundingClientRect();this.left=window.scrollX+o.left+i+this.ref.scrollLeft,this.top=window.scrollY+o.top+r+o.height-this.ref.scrollTop,this.menuRef.style.left=this.left+"px",this.menuRef.style.top=this.top+"px"})))}onKeyDown(t){let e=!1;if(void 0!==this.triggerIdx)switch(t.key){case"ArrowDown":this.active=Math.min(this.active+1,this.options.length-1),this.renderMenu(),e=!0;break;case"ArrowUp":this.active=Math.max(this.active-1,0),this.renderMenu(),e=!0;break;case"Enter":case"Tab":this.selectItem(this.active)(),e=!0}e&&t.preventDefault()}renderMenu(){return void 0===this.top?(this.menuRef.hidden=!0,void this.menuRef.classList.add("smart-hidden")):this.options.length?(this.menuRef.style.left=this.left+"px",this.menuRef.style.top=this.top+"px",this.menuRef.innerHTML="",this.ref===document.activeElement&&this.menuRef.classList.remove("smart-hidden"),this.options.forEach(((t,e)=>{this.menuRef.appendChild(this.menuItemFn(t,this.selectItem(e),this.active===e))})),this.menuRef.hidden=!1,void this.menuRef.classList.remove("smart-hidden")):(this.menuRef.hidden=!0,void this.menuRef.classList.add("smart-hidden"))}}})();