builder-settings-types 0.0.317 → 0.0.319

package/dist/builder-settings-types.cjs.js

@@ -282,7 +282,7 @@
 </svg>`;class ye extends H{constructor(t={}){super({...t,minValue:t.minValue??0,maxValue:t.maxValue??1e3,icon:t.icon||Ce,title:t.title||"Margin Bottom",default:t.default??20,wrapperClassName:"margin-bottom-wrapper "+(t.wrapperClassName||"")}),this.inputType="number"}}const be=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
 <path d="M15.75 7.25H2.25m9.9 9h-6.3c-1.26 0-1.89 0-2.371-.245a2.25 2.25 0 0 1-.984-.983c-.245-.482-.245-1.112-.245-2.372v-6.3c0-1.26 0-1.89.245-2.371a2.25 2.25 0 0 1 .984-.984c.48-.245 1.11-.245 2.371-.245h6.3c1.26 0 1.89 0 2.371.245.424.216.768.56.984.984.245.48.245 1.11.245 2.371v6.3c0 1.26 0 1.89-.245 2.371-.216.424-.56.768-.984.984-.48.245-1.11.245-2.371.245"
  stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`;class Ee extends H{constructor(t={}){super({...t,minValue:t.minValue??0,maxValue:t.maxValue??1e3,icon:t.icon||be,title:t.title||"Margin Top",default:t.default??20,wrapperClassName:"margin-top-wrapper "+(t.wrapperClassName||"")}),this.inputType="number"}}class we extends x{constructor(t){super(t),this.inputType={},this.container=null,this.defaultLanguage="",this.uploadSettings=new Map,this.popup=null,t.default?this.value={...t.default}:this.value||(this.value={}),this.defaultLanguage=t.languages.includes(x.DefaultLanguage)?x.DefaultLanguage:t.languages[0];const e=t.defaultValue||`Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;t.languages.forEach(i=>{var s,n;i in(this.value||{})||(this.value||(this.value={}),i===this.defaultLanguage&&e?this.value[i]=((s=t.default)==null?void 0:s[i])||e:this.value[i]=((n=t.default)==null?void 0:n[i])||"")})}capitalizeFirstLetter(t){return String(t).charAt(0).toUpperCase()+String(t).slice(1)}measureTextWidth(t,e){this.textMeasureCanvas||(this.textMeasureCanvas=document.createElement("canvas"));const i=this.textMeasureCanvas.getContext("2d");if(!i)return t.length*10;const s=`${e.fontStyle} ${e.fontWeight} ${e.fontSize} ${e.fontFamily}`.trim();return i.font=s,i.measureText(t).width}adaptPlaceholderToSingleLine(t,e){const i=window.getComputedStyle(t),s=parseFloat(i.paddingLeft)||0,n=parseFloat(i.paddingRight)||0,o=parseFloat(i.borderLeftWidth)||0,a=parseFloat(i.borderRightWidth)||0,l=Math.max(0,t.clientWidth-s-n-o-a);if(l<=0){t.placeholder=e;return}if(this.measureTextWidth(e,i)<=l){t.placeholder=e;return}const c="...";let h=0,d=e.length,u=0;for(;h<=d;){const m=Math.floor((h+d)/2),g=e.slice(0,m).trimEnd()+c;this.measureTextWidth(g,i)<=l?(u=m,h=m+1):d=m-1}const f=e.slice(0,u).trimEnd()+c;t.placeholder=f}autosizeTextarea(t,e=3){t.style.height="auto";const i=window.getComputedStyle(t),s=parseFloat(i.lineHeight)||20,n=parseFloat(i.paddingTop)+parseFloat(i.paddingBottom),o=parseFloat(i.borderTopWidth)+parseFloat(i.borderBottomWidth),a=s*e+n+o,l=Math.min(t.scrollHeight||44,a);t.style.height=`${l}px`,t.scrollHeight>a?t.style.overflowY="auto":t.style.overflowY="hidden"}createTextareaRow(t,e){const i=document.createElement("div");i.classList.add("simple-multi-language-row");const s=document.createElement("label");if(s.classList.add("simple-language-label"),s.textContent=t.toUpperCase(),s.setAttribute("for",`textarea-${t}`),i.appendChild(s),this.props.multiImg){const n=new et({defaultUrl:e||"",title:"",id:`${this.id}_upload_${t}`});n.setOnChange(a=>{this.updateLanguageValue(t,a),t===this.defaultLanguage&&this.updateOtherLanguagePlaceholders(a)}),this.uploadSettings.set(t,n);const o=n.draw();o.classList.add("simple-language-upload"),i.appendChild(o)}else{const n=document.createElement("textarea");n.id=`textarea-${t}`,n.classList.add("simple-language-textarea"),n.value=e||"",n.rows=1,n.style.overflowY="hidden";let o=this.props.placeholder||"Enter text in {language}...";o.includes("{language}")&&(o=o.replace("{language}",t.toUpperCase())),n.setAttribute("data-full-placeholder",o),this.adaptPlaceholderToSingleLine(n,o),this.getDataPropsPath()&&n.setAttribute("data-test-id",`${this.getDataPropsPath()}_${t}`),n.addEventListener("input",l=>{const r=l.target;this.updateLanguageValue(t,r.value),t===this.defaultLanguage&&this.updateOtherLanguagePlaceholders(r.value),this.autosizeTextarea(r,3);const c=n.getAttribute("data-full-placeholder")||"";c&&this.adaptPlaceholderToSingleLine(n,c)}),i.appendChild(n),(l=>(typeof queueMicrotask=="function"?queueMicrotask:r=>setTimeout(r,0))(l))(()=>{this.autosizeTextarea(n,3);const l=n.getAttribute("data-full-placeholder")||"";l&&this.adaptPlaceholderToSingleLine(n,l)})}return i}updateLanguageValue(t,e){this.value||(this.value={});const i={...this.value,[t]:e};this.setValue(i)}updateOtherLanguagePlaceholders(t){this.container&&this.props.languages.forEach(e=>{var s,n;if(e===this.defaultLanguage)return;const i=(s=this.container)==null?void 0:s.querySelector(`#textarea-${e}`);if(i&&(!i.value||i.value.trim()==="")){const o=t||((n=this.props.placeholder)==null?void 0:n.replace("{language}",e.toUpperCase()))||`Enter text in ${e.toUpperCase()}...`;i.setAttribute("data-full-placeholder",o),this.adaptPlaceholderToSingleLine(i,o)}})}renderContent(t){var a;const e=t.querySelector(".simple-multi-language-content");if(!e)return;e.innerHTML="";const i=x.CurrentLanguage(),s=((a=this.value)==null?void 0:a[i])||"",n=this.createTextareaRow(i,s);e.appendChild(n);const o=e.querySelector(".simple-language-textarea");if(o){const l=o.getAttribute("data-full-placeholder")||"";l&&this.adaptPlaceholderToSingleLine(o,l)}}createPopup(){const t=document.createElement("div");t.classList.add("multi-language-popup-overlay"),t.style.cssText=`
+</svg>`;class Ee extends H{constructor(t={}){super({...t,minValue:t.minValue??0,maxValue:t.maxValue??1e3,icon:t.icon||be,title:t.title||"Margin Top",default:t.default??20,wrapperClassName:"margin-top-wrapper "+(t.wrapperClassName||"")}),this.inputType="number"}}class we extends x{constructor(t){super(t),this.inputType={},this.container=null,this.defaultLanguage="",this.uploadSettings=new Map,this.popup=null,t.default?this.value={...t.default}:this.value||(this.value={}),this.defaultLanguage=t.languages.includes(x.DefaultLanguage)?x.DefaultLanguage:t.languages[0];const e=t.defaultValue||`Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;t.languages.forEach(i=>{var s,n;i in(this.value||{})||(this.value||(this.value={}),i===this.defaultLanguage&&e?this.value[i]=((s=t.default)==null?void 0:s[i])||e:this.value[i]=((n=t.default)==null?void 0:n[i])||"")})}capitalizeFirstLetter(t){return String(t).charAt(0).toUpperCase()+String(t).slice(1)}measureTextWidth(t,e){this.textMeasureCanvas||(this.textMeasureCanvas=document.createElement("canvas"));const i=this.textMeasureCanvas.getContext("2d");if(!i)return t.length*10;const s=`${e.fontStyle} ${e.fontWeight} ${e.fontSize} ${e.fontFamily}`.trim();return i.font=s,i.measureText(t).width}adaptPlaceholderToSingleLine(t,e){const i=window.getComputedStyle(t),s=parseFloat(i.paddingLeft)||0,n=parseFloat(i.paddingRight)||0,o=parseFloat(i.borderLeftWidth)||0,a=parseFloat(i.borderRightWidth)||0,l=Math.max(0,t.clientWidth-s-n-o-a);if(l<=0){t.placeholder=e;return}if(this.measureTextWidth(e,i)<=l){t.placeholder=e;return}const c="...";let h=0,d=e.length,u=0;for(;h<=d;){const m=Math.floor((h+d)/2),g=e.slice(0,m).trimEnd()+c;this.measureTextWidth(g,i)<=l?(u=m,h=m+1):d=m-1}const f=e.slice(0,u).trimEnd()+c;t.placeholder=f}autosizeTextarea(t,e=3){t.style.height="auto";const i=window.getComputedStyle(t),s=parseFloat(i.lineHeight)||20,n=parseFloat(i.paddingTop)+parseFloat(i.paddingBottom),o=parseFloat(i.borderTopWidth)+parseFloat(i.borderBottomWidth),a=s*e+n+o,l=Math.min(t.scrollHeight||44,a);t.style.height=`${l}px`,t.scrollHeight>a?t.style.overflowY="auto":t.style.overflowY="hidden"}createTextareaRow(t,e){const i=document.createElement("div");i.classList.add("simple-multi-language-row");const s=document.createElement("label");if(s.classList.add("simple-language-label"),s.textContent=t.toUpperCase(),s.setAttribute("for",`textarea-${t}`),i.appendChild(s),this.props.multiImg){const n=new et({defaultUrl:e||"",title:"",id:`${this.id}_upload_${t}`});n.setOnChange(a=>{this.updateLanguageValue(t,a),t===this.defaultLanguage&&this.updateOtherLanguagePlaceholders(a)}),this.uploadSettings.set(t,n);const o=n.draw();o.classList.add("simple-language-upload"),i.appendChild(o)}else{const n=document.createElement("textarea");n.id=`textarea-${t}`,n.classList.add("simple-language-textarea"),n.value=e||"",n.rows=1,n.style.overflowY="hidden";let o=this.props.placeholder||"Enter text in {language}...";o.includes("{language}")&&(o=o.replace("{language}",t.toUpperCase())),n.setAttribute("data-full-placeholder",o),this.adaptPlaceholderToSingleLine(n,o),this.getDataPropsPath()&&n.setAttribute("data-test-id",`${this.getDataPropsPath()}_${t}`),n.addEventListener("input",l=>{const r=l.target;this.updateLanguageValue(t,r.value),t===this.defaultLanguage&&this.updateOtherLanguagePlaceholders(r.value),this.autosizeTextarea(r,3);const c=n.getAttribute("data-full-placeholder")||"";c&&this.adaptPlaceholderToSingleLine(n,c)}),i.appendChild(n),(l=>(typeof queueMicrotask=="function"?queueMicrotask:r=>setTimeout(r,0))(l))(()=>{this.autosizeTextarea(n,3);const l=n.getAttribute("data-full-placeholder")||"";l&&this.adaptPlaceholderToSingleLine(n,l)})}return i}updateLanguageValue(t,e){this.value||(this.value={});const i={...this.value,[t]:e};this.setValue(i)}updateOtherLanguagePlaceholders(t){this.container&&this.props.languages.forEach(e=>{var s,n;if(e===this.defaultLanguage)return;const i=(s=this.container)==null?void 0:s.querySelector(`#textarea-${e}`);if(i&&(!i.value||i.value.trim()==="")){const o=t||((n=this.props.placeholder)==null?void 0:n.replace("{language}",e.toUpperCase()))||`Enter text in ${e.toUpperCase()}...`;i.setAttribute("data-full-placeholder",o),this.adaptPlaceholderToSingleLine(i,o)}})}renderContent(t){var s;const e=t.querySelector(".simple-multi-language-content");if(!e)return;e.innerHTML="";const i=x.CurrentLanguage();if(!i||!this.props.languages.includes(i))this.props.languages.forEach(n=>{var l;const o=((l=this.value)==null?void 0:l[n])||"",a=this.createTextareaRow(n,o);e.appendChild(a)});else{const n=((s=this.value)==null?void 0:s[i])||"",o=this.createTextareaRow(i,n);e.appendChild(o);const a=e.querySelector(".simple-language-textarea");if(a){const l=a.getAttribute("data-full-placeholder")||"";l&&this.adaptPlaceholderToSingleLine(a,l)}}}createPopup(){const t=document.createElement("div");t.classList.add("multi-language-popup-overlay"),t.style.cssText=`
       position: fixed;
       top: 0;
       left: 0;
@@ -324,16 +324,16 @@
       align-items: center;
       justify-content: center;
       line-height: 1;
-    `,n.addEventListener("click",()=>this.closePopup()),i.appendChild(s),i.appendChild(n),e.appendChild(i);const o=document.createElement("div");return o.classList.add("multi-language-popup-content"),this.props.languages.forEach(a=>{var c;const l=((c=this.value)==null?void 0:c[a])||"",r=this.createTextareaRow(a,l);o.appendChild(r)}),e.appendChild(o),t.appendChild(e),t.addEventListener("click",a=>{a.target===t&&this.closePopup()}),t}showPopup(){this.popup||(this.popup=this.createPopup(),document.body.appendChild(this.popup))}closePopup(){this.popup&&(document.body.removeChild(this.popup),this.popup=null)}draw(){const t=document.createElement("div");if(t.classList.add("simple-multi-language-wrapper"),this.props.title){const s=document.createElement("div");s.classList.add("simple-multi-language-title"),s.style.cssText=`
+    `,n.addEventListener("click",()=>this.closePopup()),i.appendChild(s),i.appendChild(n),e.appendChild(i);const o=document.createElement("div");return o.classList.add("multi-language-popup-content"),this.props.languages.forEach(a=>{var c;const l=((c=this.value)==null?void 0:c[a])||"",r=this.createTextareaRow(a,l);o.appendChild(r)}),e.appendChild(o),t.appendChild(e),t.addEventListener("click",a=>{a.target===t&&this.closePopup()}),t}showPopup(){this.popup||(this.popup=this.createPopup(),document.body.appendChild(this.popup))}closePopup(){this.popup&&(document.body.removeChild(this.popup),this.popup=null)}draw(){const t=document.createElement("div");t.classList.add("simple-multi-language-wrapper");const e=document.createElement("div");e.classList.add("simple-multi-language-title"),e.style.cssText=`
         display: flex;
         justify-content: space-between;
         align-items: center;
-      `;const n=document.createElement("span");n.textContent=this.props.title;const o=document.createElement("button");o.classList.add("multi-language-eye-icon"),o.innerHTML=`
+      `;const i=document.createElement("span");i.textContent=this.props.title??"";const s=document.createElement("button");s.classList.add("multi-language-eye-icon"),s.innerHTML=`
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
           <circle cx="12" cy="12" r="3"></circle>
         </svg>
-      `,o.style.cssText=`
+      `,s.style.cssText=`
         background: none;
         border: none;
         cursor: pointer;
@@ -343,7 +343,7 @@
         justify-content: center;
         color: #666;
         transition: color 0.2s;
-      `,o.addEventListener("mouseenter",()=>{o.style.color="#000"}),o.addEventListener("mouseleave",()=>{o.style.color="#666"}),o.addEventListener("click",a=>{a.preventDefault(),this.showPopup()}),s.appendChild(n),s.appendChild(o),t.appendChild(s)}const e=document.createElement("div");e.classList.add("simple-multi-language-content"),t.appendChild(e),this.container=t,this.renderContent(t),this.languageChangeUnsubscribe=x.onLanguageChange(()=>{this.container&&this.renderContent(this.container)});const i=()=>{if(!this.container)return;this.container.querySelectorAll(".simple-language-textarea").forEach(n=>{const o=n.getAttribute("data-full-placeholder")||"";o&&this.adaptPlaceholderToSingleLine(n,o)})};return window.addEventListener("resize",i),t}setValue(t){super.setValue(t),this.container&&this.props.languages.forEach(e=>{var i;if(this.props.multiImg){const s=this.uploadSettings.get(e);s&&s.setValue((t==null?void 0:t[e])||"")}else{const s=(i=this.container)==null?void 0:i.querySelector(`#textarea-${e}`);if(s){s.value=(t==null?void 0:t[e])||"",this.autosizeTextarea(s,3);const n=s.getAttribute("data-full-placeholder")||"";n&&this.adaptPlaceholderToSingleLine(s,n)}}})}}class xe extends x{constructor(t={}){super(t),this.inputType="select";const e=[{name:"None",value:"none"},{name:"Fade",value:"fade 1.5s ease-in-out infinite"},{name:"Slide",value:"slide 1.5s ease-in-out infinite"},{name:"Zoom",value:"zoom 1.5s ease-in-out infinite"},{name:"Bounce",value:"bounce 1.5s ease-in-out infinite"},{name:"Pulse",value:"pulse 1.5s ease-in-out infinite"}];this.selectSetting=new Q({title:this.title||"Animation",options:e,default:this.props.default||"none"}),this.selectSetting.onChange=i=>{var s;this.value=i,(s=this.onChange)==null||s.call(this,i)}}draw(){return this.selectSetting.draw()}destroy(){this.selectSetting.destroy(),super.destroy()}}const Le=`
+      `,s.addEventListener("mouseenter",()=>{s.style.color="#000"}),s.addEventListener("mouseleave",()=>{s.style.color="#666"}),s.addEventListener("click",a=>{a.preventDefault(),this.showPopup()}),e.appendChild(i),e.appendChild(s),t.appendChild(e);const n=document.createElement("div");n.classList.add("simple-multi-language-content"),t.appendChild(n),this.container=t,this.renderContent(t),this.languageChangeUnsubscribe=x.onLanguageChange(()=>{this.container&&this.renderContent(this.container)});const o=()=>{if(!this.container)return;this.container.querySelectorAll(".simple-language-textarea").forEach(l=>{const r=l.getAttribute("data-full-placeholder")||"";r&&this.adaptPlaceholderToSingleLine(l,r)})};return window.addEventListener("resize",o),t}setValue(t){super.setValue(t),this.container&&this.props.languages.forEach(e=>{var i;if(this.props.multiImg){const s=this.uploadSettings.get(e);s&&s.setValue((t==null?void 0:t[e])||"")}else{const s=(i=this.container)==null?void 0:i.querySelector(`#textarea-${e}`);if(s){s.value=(t==null?void 0:t[e])||"",this.autosizeTextarea(s,3);const n=s.getAttribute("data-full-placeholder")||"";n&&this.adaptPlaceholderToSingleLine(s,n)}}})}}class xe extends x{constructor(t={}){super(t),this.inputType="select";const e=[{name:"None",value:"none"},{name:"Fade",value:"fade 1.5s ease-in-out infinite"},{name:"Slide",value:"slide 1.5s ease-in-out infinite"},{name:"Zoom",value:"zoom 1.5s ease-in-out infinite"},{name:"Bounce",value:"bounce 1.5s ease-in-out infinite"},{name:"Pulse",value:"pulse 1.5s ease-in-out infinite"}];this.selectSetting=new Q({title:this.title||"Animation",options:e,default:this.props.default||"none"}),this.selectSetting.onChange=i=>{var s;this.value=i,(s=this.onChange)==null||s.call(this,i)}}draw(){return this.selectSetting.draw()}destroy(){this.selectSetting.destroy(),super.destroy()}}const Le=`
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/dist/builder-settings-types.es.js

@@ -4283,20 +4283,29 @@ class Te extends x {
     });
   }
   renderContent(t) {
-    var a;
+    var s;
     const e = t.querySelector(
       ".simple-multi-language-content"
     );
     if (!e) return;
     e.innerHTML = "";
-    const i = x.CurrentLanguage(), s = ((a = this.value) == null ? void 0 : a[i]) || "", n = this.createTextareaRow(i, s);
-    e.appendChild(n);
-    const o = e.querySelector(
-      ".simple-language-textarea"
-    );
-    if (o) {
-      const l = o.getAttribute("data-full-placeholder") || "";
-      l && this.adaptPlaceholderToSingleLine(o, l);
+    const i = x.CurrentLanguage();
+    if (!i || !this.props.languages.includes(i))
+      this.props.languages.forEach((n) => {
+        var l;
+        const o = ((l = this.value) == null ? void 0 : l[n]) || "", a = this.createTextareaRow(n, o);
+        e.appendChild(a);
+      });
+    else {
+      const n = ((s = this.value) == null ? void 0 : s[i]) || "", o = this.createTextareaRow(i, n);
+      e.appendChild(o);
+      const a = e.querySelector(
+        ".simple-language-textarea"
+      );
+      if (a) {
+        const l = a.getAttribute("data-full-placeholder") || "";
+        l && this.adaptPlaceholderToSingleLine(a, l);
+      }
     }
   }
   createPopup() {
@@ -4369,22 +4378,22 @@ class Te extends x {
   }
   draw() {
     const t = document.createElement("div");
-    if (t.classList.add("simple-multi-language-wrapper"), this.props.title) {
-      const s = document.createElement("div");
-      s.classList.add("simple-multi-language-title"), s.style.cssText = `
+    t.classList.add("simple-multi-language-wrapper");
+    const e = document.createElement("div");
+    e.classList.add("simple-multi-language-title"), e.style.cssText = `
         display: flex;
         justify-content: space-between;
         align-items: center;
       `;
-      const n = document.createElement("span");
-      n.textContent = this.props.title;
-      const o = document.createElement("button");
-      o.classList.add("multi-language-eye-icon"), o.innerHTML = `
+    const i = document.createElement("span");
+    i.textContent = this.props.title ?? "";
+    const s = document.createElement("button");
+    s.classList.add("multi-language-eye-icon"), s.innerHTML = `
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
           <circle cx="12" cy="12" r="3"></circle>
         </svg>
-      `, o.style.cssText = `
+      `, s.style.cssText = `
         background: none;
         border: none;
         cursor: pointer;
@@ -4394,28 +4403,27 @@ class Te extends x {
         justify-content: center;
         color: #666;
         transition: color 0.2s;
-      `, o.addEventListener("mouseenter", () => {
-        o.style.color = "#000";
-      }), o.addEventListener("mouseleave", () => {
-        o.style.color = "#666";
-      }), o.addEventListener("click", (a) => {
-        a.preventDefault(), this.showPopup();
-      }), s.appendChild(n), s.appendChild(o), t.appendChild(s);
-    }
-    const e = document.createElement("div");
-    e.classList.add("simple-multi-language-content"), t.appendChild(e), this.container = t, this.renderContent(t), this.languageChangeUnsubscribe = x.onLanguageChange(() => {
+      `, s.addEventListener("mouseenter", () => {
+      s.style.color = "#000";
+    }), s.addEventListener("mouseleave", () => {
+      s.style.color = "#666";
+    }), s.addEventListener("click", (a) => {
+      a.preventDefault(), this.showPopup();
+    }), e.appendChild(i), e.appendChild(s), t.appendChild(e);
+    const n = document.createElement("div");
+    n.classList.add("simple-multi-language-content"), t.appendChild(n), this.container = t, this.renderContent(t), this.languageChangeUnsubscribe = x.onLanguageChange(() => {
       this.container && this.renderContent(this.container);
     });
-    const i = () => {
+    const o = () => {
       if (!this.container) return;
       this.container.querySelectorAll(
         ".simple-language-textarea"
-      ).forEach((n) => {
-        const o = n.getAttribute("data-full-placeholder") || "";
-        o && this.adaptPlaceholderToSingleLine(n, o);
+      ).forEach((l) => {
+        const r = l.getAttribute("data-full-placeholder") || "";
+        r && this.adaptPlaceholderToSingleLine(l, r);
       });
     };
-    return window.addEventListener("resize", i), t;
+    return window.addEventListener("resize", o), t;
   }
   setValue(t) {
     super.setValue(t), this.container && this.props.languages.forEach((e) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "builder-settings-types",
   "description": "builder settings",
-  "version": "0.0.317",
+  "version": "0.0.319",
   "type": "module",
   "main": "dist/builder-settings-types.cjs.js",
   "module": "dist/builder-settings-types.es.js",