@things-factory/meta-ui 7.0.0-y.0 → 7.0.1-alpha.0

package/client/component/filter/filter-grist-meta-object-select.js

@@ -1,16 +1,95 @@
-import"../popup/meta-object-selector-popup";import{html}from"lit-html";import{openPopup}from"@operato/layout";import{TermsUtil}from"./../../utils/terms-util";function openMetaObjectSelector(e,t,o){var r=html`
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from './../../utils/terms-util'
+
+
+function openMetaObjectSelector(column, value, confirmCallback) {
+
+  var template = html`
     <meta-object-selector-popup
-      .value=${t}
-      .options=${e.record.options}
-      .confirmCallback=${o}
+      .value=${value}
+      .options=${column.record.options}
+      .confirmCallback=${confirmCallback}
     ></meta-object-selector-popup>
-  `;openPopup(r,{backdrop:!0,size:"large",title:e.record.options.selectorName?TermsUtil.tMenu(e.record.options.selectorName):TermsUtil.tTitle("select_item")})}export const FilterGristMetaObjectSelect=(e,t,o)=>{const r=e.filter,{operator:l="eq"}=r,p=e.record.options;let a=t?t.id:"",n="";if(t){let e=p.nameField.split(",");n=t[e[0]],e.length>1&&(n+=`(${e.splice(1).map((e=>t[e])).join(",")})`)}return"eq"===l?html`
-        <input name='${e.name}' .value=${a} type="text" hidden></input>
+  `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: column.record.options.selectorName ? TermsUtil.tMenu(column.record.options.selectorName) : TermsUtil.tTitle('select_item')
+  })
+}
+
+export const FilterGristMetaObjectSelect = (column, value, owner) => {
+  const filter = column.filter;
+  const { operator = 'eq' } = filter;
+  const options = column.record.options;
+  let hideText = value? value.id : '';
+  let text = '';
+
+  if(value){
+    let fields = options.nameField.split(",");
+    text = value[fields[0]];
+
+    if(fields.length > 1){
+      text+= `(${fields.splice(1).map(field => { return value[field]}).join(",")})` 
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${column.name}' .value=${hideText} type="text" hidden></input>
         <input
           type="text"
           readonly
-          name='${e.name}_disp'
-          .value=${n}
-          @click=${a=>{a.stopPropagation();const n=a.target;openMetaObjectSelector(e,t,(t=>{let a=t?t.id:"",i="";if(t){let e=p.nameField.split(",");i=t[e[0]],e.length>1&&(i+=`(${e.splice(1).map((e=>t[e])).join(",")})`)}n.value=i,("ox-grid-header"==o.tagName.toLowerCase()?o.renderRoot.querySelector(`[name="${r.name}"]`):o.renderRoot.querySelector(`form [name="${r.name}"]`)).value=a,n.dispatchEvent(new Event("change",{bubbles:!0})),n.dispatchEvent(new CustomEvent("filter-change",{bubbles:!0,composed:!0,detail:{name:e.name,operator:l,value:a}}))}))}}
+          name='${column.name}_disp'
+          .value=${text}
+          @click=${(e) => {
+            e.stopPropagation();
+
+            const input = e.target;
+
+            const confirmCallback = (selected) => {
+              let code = selected ? selected.id : '';
+              let disp = '';
+
+              if(selected){
+                let fields = options.nameField.split(",");
+                disp = selected[fields[0]];
+            
+                if(fields.length > 1){
+                  disp+= `(${fields.splice(1).map(field => { return selected[field]}).join(",")})` 
+                }
+              }
+
+              input.value = disp;
+
+              let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header' 
+                            ? owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                            : owner.renderRoot.querySelector(`form [name="${filter.name}"]`);
+              codeInput.value = code;
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))              
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: column.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaObjectSelector(column, value, confirmCallback)
+          }}
         />
-      `:html``};
+      `
+    : html``
+}

package/client/component/grist/editor/grist-editor-code-input.js

@@ -1,8 +1,96 @@
-import{html}from"lit";import{OxGristEditor}from"@operato/data-grist";import{openPopup}from"@operato/layout";import{TermsUtil}from"../../../utils/terms-util";import"../../popup/code-input-editor-popup";export class GristEditorCodeInput extends OxGristEditor{static get properties(){return{value:Object,column:Object,record:Object,rowIndex:Number,field:Object,popup:Object}}get editorTemplate(){let t;return this.value&&(t="object"==typeof this.value?JSON.stringify(this.value,0,2):this.value,t=t.length>20?`${t.substring(0,20)}...`:t),html`
-      ${t?html` <span tabindex="0" style="flex:1;">${t}</span> `:html`<span tabindex="0" ></span>`}
-    `}async firstUpdated(){super.firstUpdated()}_onclick(t){t.stopPropagation(),this.openEditor()}_onkeydown(t){"Enter"==t.key&&(t.stopPropagation(),this.openEditor())}openEditor(){this.popup&&delete this.popup;var t=html`
+import { html } from 'lit'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from '../../../utils/terms-util';
+
+import '../../popup/code-input-editor-popup'
+
+export class GristEditorCodeInput extends OxGristEditor {
+  static get properties() {
+    return {
+      value: Object,
+      column: Object,
+      record: Object,
+      rowIndex: Number,
+      field: Object,
+      popup: Object
+    }
+  }
+  
+  get editorTemplate() {
+    let text = undefined;
+
+    if(this.value){
+      if(typeof this.value === 'object'){
+        text = JSON.stringify(this.value, 0, 2);
+      } else {
+        text = this.value;
+      }
+
+      text = text.length > 20 ? `${text.substring(0,20)}...` : text;
+    }
+      
+    return html`
+      ${!text
+        ? html`<span tabindex="0" ></span>`
+        : html` <span tabindex="0" style="flex:1;">${text}</span> `}
+    `
+  }
+  
+  async firstUpdated() {
+    super.firstUpdated()
+  }
+
+  _onclick(e) {
+    e.stopPropagation()
+    this.openEditor()
+  }
+  
+  _onkeydown(e) {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openEditor()
+    }
+  }
+  
+  openEditor() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const confirmCallback = (chageValue) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: chageValue
+              ? (typeof this.value === 'object' ? JSON.parse(chageValue) : chageValue)
+              : null,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    var template = html`
         <code-input-editor-popup
           .value=${this.value}
-          .confirmCallback=${(t=>{this.dispatchEvent(new CustomEvent("field-change",{bubbles:!0,composed:!0,detail:{before:this.value,after:t?"object"==typeof this.value?JSON.parse(t):t:null,record:this.record,column:this.column,row:this.row}}))}).bind(this)}
+          .confirmCallback=${confirmCallback.bind(this)}
         ></code-input-editor-popup>
-      `;this.popup=openPopup(t,{backdrop:!0,size:"large",title:TermsUtil.tTitle("code-editor")})}}customElements.define("grist-editor-code-input",GristEditorCodeInput);
+      `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: TermsUtil.tTitle('code-editor')
+    })
+  }    
+}
+  
+customElements.define('grist-editor-code-input', GristEditorCodeInput)

package/client/component/grist/editor/grist-editor-meta-code-selector.js

@@ -1,9 +1,157 @@
-import{html}from"lit";import{OxGristEditor}from"@operato/data-grist";import{openPopup}from"@operato/layout";import{TermsUtil}from"../../../utils/terms-util";import"../../popup/meta-object-selector-popup";export class GristEditorMetaCodeSelector extends OxGristEditor{static get properties(){return{value:Object,column:Object,record:Object,rowIndex:Number,field:Object,popup:Object}}get editorTemplate(){let e="";if(this.column.record&&this.column.record.options)if(this.column.record.options.dispField){let t=this.column.record.options.codes||[];if(this.value&&this.value.length>0){let o=t.filter((e=>e.value===this.value));e=o&&o.length>0?o[0].display:""}}else e=this.value;else e="";return html`
-      ${e?html` <span tabindex="0" style="flex:1">${e}</span> `:html`<span tabindex="0"></span>`}
-    `}async firstUpdated(){super.firstUpdated()}_onclick(e){e.stopPropagation(),this.openSelector()}_onkeydown(e){"Enter"==e.key&&(e.stopPropagation(),this.openSelector())}openSelector(){this.popup&&delete this.popup;var{selectorName:e=TermsUtil.tTitle("select_item")}=this.column.record.options||{};var t=html`
+import { html } from 'lit'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from '../../../utils/terms-util';
+
+import '../../popup/meta-object-selector-popup'
+
+export class GristEditorMetaCodeSelector extends OxGristEditor {
+  static get properties() {
+    return {
+      value: Object,
+      column: Object,
+      record: Object,
+      rowIndex: Number,
+      field: Object,
+      popup: Object
+    }
+  }
+  
+  get editorTemplate() {
+    let text = '';
+
+    if(!this.column.record || !this.column.record.options){
+      text = '';
+    } else if (!this.column.record.options.dispField){
+      text = this.value;
+    } else {
+      let codes = this.column.record.options.codes || [];
+
+      if(this.value && this.value.length > 0){
+        let codeDisp = codes.filter(x=> x.value === this.value);
+    
+        if(codeDisp && codeDisp.length > 0){
+          text = codeDisp[0].display;
+        } else {
+          text = '';
+        }
+      }  
+    }
+      
+    return html`
+      ${!text
+        ? html`<span tabindex="0"></span>`
+        : html` <span tabindex="0" style="flex:1">${text}</span> `}
+    `
+  }
+  
+  async firstUpdated() {
+    super.firstUpdated()
+  }
+
+  _onclick(e) {
+    e.stopPropagation()
+    this.openSelector()
+  }
+  
+  _onkeydown(e) {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openSelector()
+    }
+  }
+  
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    var {
+      selectorName = TermsUtil.tTitle('select_item')
+    } = this.column.record.options || {}
+
+    const confirmCallback = (selected) => {
+      let codeField = this.column.record.options.codeField;
+      let dispField = this.column.record.options.dispField;
+      let fieldMap = this.column.record.options.fieldMap || {};
+
+      if(!this.column.record.options.codes) {
+        this.column.record.options.codes = [];
+      }
+
+      if(selected){
+        let checkCodeList = this.column.record.options.codes.filter(x=> x.value == selected[codeField]);
+        if(!checkCodeList || checkCodeList.length == 0){
+          let disp = selected[codeField];
+
+          if(dispField){
+            let fields = dispField.split(",");
+            disp = selected[fields[0]];
+        
+            if(fields.length > 1){
+              disp+= `(${fields.splice(1).map(field => { return selected[field]}).join(",")})` 
+            }
+          }
+
+          this.column.record.options.codes.push({
+            value: selected[codeField],
+            display: disp
+          })
+        }
+      }
+
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: selected
+              ? selected[codeField]
+              : null,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+
+
+      Object.keys(fieldMap).forEach(key =>{
+        this.dispatchEvent(
+          new CustomEvent('field-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              before: this.record[fieldMap[key]],
+              after: selected
+                ? selected[key]
+                : null,
+              record: this.record,
+              column: {name: fieldMap[key]},
+              row: this.row
+            }
+          })
+        )
+      })
+    }
+
+    var template = html`
         <meta-object-selector-popup
           .value=${this.value}
           .options=${this.column.record.options}
-          .confirmCallback=${(e=>{let t=this.column.record.options.codeField,o=this.column.record.options.dispField,i=this.column.record.options.fieldMap||{};if(this.column.record.options.codes||(this.column.record.options.codes=[]),e){let i=this.column.record.options.codes.filter((o=>o.value==e[t]));if(!i||0==i.length){let i=e[t];if(o){let t=o.split(",");i=e[t[0]],t.length>1&&(i+=`(${t.splice(1).map((t=>e[t])).join(",")})`)}this.column.record.options.codes.push({value:e[t],display:i})}}this.dispatchEvent(new CustomEvent("field-change",{bubbles:!0,composed:!0,detail:{before:this.value,after:e?e[t]:null,record:this.record,column:this.column,row:this.row}})),Object.keys(i).forEach((t=>{this.dispatchEvent(new CustomEvent("field-change",{bubbles:!0,composed:!0,detail:{before:this.record[i[t]],after:e?e[t]:null,record:this.record,column:{name:i[t]},row:this.row}}))}))}).bind(this)}
+          .confirmCallback=${confirmCallback.bind(this)}
         ></meta-object-selector-popup>
-      `;this.popup=openPopup(t,{backdrop:!0,size:"large",title:TermsUtil.tMenu(e)})}}customElements.define("grist-editor-meta-code-selector",GristEditorMetaCodeSelector);
+      `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: TermsUtil.tMenu(selectorName)
+    })
+  }    
+}
+  
+customElements.define('grist-editor-meta-code-selector', GristEditorMetaCodeSelector)

package/client/component/grist/editor/grist-editor-meta-object-selector.js

@@ -1,10 +1,122 @@
-import{html}from"lit";import{OxGristEditor}from"@operato/data-grist";import{openPopup}from"@operato/layout";import{TermsUtil}from"../../../utils/terms-util";import"../../popup/meta-object-selector-popup";export class GristEditorMetaObjectSelector extends OxGristEditor{static get properties(){return{value:Object,column:Object,record:Object,rowIndex:Number,field:Object,popup:Object}}get editorTemplate(){let e="";if(this.value&&this.column.record.options){let t=this.column.record.options.nameField.split(",");e=this.value[t[0]],t.length>1&&(e+=`(${t.splice(1).map((e=>this.value[e])).join(",")})`)}return html`
-      ${this.value?html` <span tabindex="0" style="flex:1">${e}</span> `:html`<span tabindex="0">${e}</span>`}
-    `}async firstUpdated(){super.firstUpdated()}_onclick(e){e.stopPropagation(),this.openSelector()}_onkeydown(e){"Enter"==e.key&&(e.stopPropagation(),this.openSelector())}openSelector(){this.popup&&delete this.popup;var{selectorName:e=TermsUtil.tTitle("select_item")}=this.column.record.options||{};var t=html`
+import { html } from 'lit'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from '../../../utils/terms-util';
+
+import '../../popup/meta-object-selector-popup'
+
+export class GristEditorMetaObjectSelector extends OxGristEditor {
+  static get properties() {
+    return {
+      value: Object,
+      column: Object,
+      record: Object,
+      rowIndex: Number,
+      field: Object,
+      popup: Object
+    }
+  }
+  
+  get editorTemplate() {
+    let text = '';
+
+    if(this.value && this.column.record.options){
+
+      let fields = this.column.record.options.nameField.split(",");
+      text = this.value[fields[0]];
+  
+      if(fields.length > 1){
+        text+= `(${fields.splice(1).map(field => { return this.value[field]}).join(",")})` 
+      }
+    } 
+  
+    return html`
+      ${!this.value
+        ? html`<span tabindex="0">${text}</span>`
+        : html` <span tabindex="0" style="flex:1">${text}</span> `}
+    `
+  }
+  
+  async firstUpdated() {
+    super.firstUpdated()
+  }
+
+  _onclick(e) {
+    e.stopPropagation()
+    this.openSelector()
+  }
+  
+  _onkeydown(e) {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openSelector()
+    }
+  }
+  
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    var {
+      selectorName = TermsUtil.tTitle('select_item')
+    } = this.column.record.options || {}
+
+    const confirmCallback = (selected) => {
+      let fieldMap = this.column.record.options.fieldMap || {};
+      
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: selected
+              ? selected
+              : null,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+
+      Object.keys(fieldMap).forEach(key =>{
+        this.dispatchEvent(
+          new CustomEvent('field-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              before: this.record[fieldMap[key]],
+              after: selected
+                ? selected[key]
+                : null,
+              record: this.record,
+              column: {name: fieldMap[key]},
+              row: this.row
+            }
+          })
+        )
+      })
+    }
+
+    var template = html`
         <meta-object-selector-popup
           .value=${this.value}
           .options=${this.column.record.options}
           .record=${this.record}
-          .confirmCallback=${(e=>{let t=this.column.record.options.fieldMap||{};this.dispatchEvent(new CustomEvent("field-change",{bubbles:!0,composed:!0,detail:{before:this.value,after:e||null,record:this.record,column:this.column,row:this.row}})),Object.keys(t).forEach((o=>{this.dispatchEvent(new CustomEvent("field-change",{bubbles:!0,composed:!0,detail:{before:this.record[t[o]],after:e?e[o]:null,record:this.record,column:{name:t[o]},row:this.row}}))}))}).bind(this)}
+          .confirmCallback=${confirmCallback.bind(this)}
         ></meta-object-selector-popup>
-      `;this.popup=openPopup(t,{backdrop:!0,size:"large",title:TermsUtil.tMenu(e)})}}customElements.define("grist-editor-meta-object-selector",GristEditorMetaObjectSelector);
+      `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: TermsUtil.tMenu(selectorName)
+    })
+  }    
+}
+  
+customElements.define('grist-editor-meta-object-selector', GristEditorMetaObjectSelector)

package/client/component/grist/renderer/grist-renderer-code-input.js

@@ -1 +1,35 @@
-import{html}from"lit";import{detectOverflow}from"@operato/utils";function onmouseover(t){const o=t.target;detectOverflow(o)&&o.setAttribute("data-tooltip",o.textContent)}function onmouseout(t){t.target.removeAttribute("data-tooltip")}export const GristRendererCodeInput=(t,o,e,r,n)=>{let s="";return t&&(s="object"==typeof t?JSON.stringify(t,0,2):t,s=s.length>20?`${s.substring(0,20)}...`:s),html`<span style='flex:1' @mouseover=${onmouseover} @mouseout=${onmouseout}>${s}</span>`};
+/**
+ * 그리드 Resource-column 타입 셀렉터 
+ * @auth yang
+ */
+import { html } from 'lit'
+
+import { detectOverflow } from '@operato/utils'
+
+function onmouseover(e) {
+  const element = e.target;
+  if (detectOverflow(element)) {
+    element.setAttribute('data-tooltip', element.textContent)
+  }
+}
+
+function onmouseout(e) {
+  const element = e.target;
+  element.removeAttribute('data-tooltip');
+}
+
+export const GristRendererCodeInput = (value, column, record, rowIndex, field) => {
+
+  let text = '';
+
+  if(value){
+    if(typeof value === 'object'){
+      text = JSON.stringify(value, 0, 2);
+    } else {
+      text = value;
+    }
+    text = text.length > 20 ? `${text.substring(0,20)}...` : text;
+  }
+
+  return html`<span style='flex:1' @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`;
+}

package/client/component/grist/renderer/grist-renderer-meta-code-selector.js

@@ -1 +1,43 @@
-import{html}from"lit";import{detectOverflow}from"@operato/utils";function onmouseover(o){const e=o.target;detectOverflow(e)&&e.setAttribute("data-tooltip",e.textContent)}function onmouseout(o){o.target.removeAttribute("data-tooltip")}export const GristRendererMetaCodeSelector=(o,e,t,r,s)=>{let i="";if(e.record&&e.record.options)if(e.record.options.dispField){if(e.record.options.codes||(e.record.options.codes=[]),o&&o.length>0){let t=e.record.options.codes.filter((e=>e.value===o));i=t&&t.length>0?t[0].display:o}}else i=o;else i="";return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${i}</span>`};
+/**
+ * 그리드 Resource-column 타입 셀렉터 
+ * @auth yang
+ */
+import { html } from 'lit'
+
+import { detectOverflow } from '@operato/utils'
+
+function onmouseover(e) {
+  const element = e.target;
+  if (detectOverflow(element)) {
+    element.setAttribute('data-tooltip', element.textContent)
+  }
+}
+
+function onmouseout(e) {
+  const element = e.target;
+  element.removeAttribute('data-tooltip');
+}
+
+export const GristRendererMetaCodeSelector = (value, column, record, rowIndex, field) => {
+
+  let text = '';
+
+  if(!column.record || !column.record.options){
+    text = '';
+  } else if (!column.record.options.dispField){
+    text = value;
+  } else {
+    if(!column.record.options.codes) column.record.options.codes = [];
+
+    if(value && value.length > 0){
+      let codeDisp = column.record.options.codes.filter(x=> x.value === value);
+  
+      if(codeDisp && codeDisp.length > 0){
+        text = codeDisp[0].display;
+      } else {
+        text = value;
+      }
+    }
+  }
+  return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`;
+}

package/client/component/grist/renderer/grist-renderer-meta-object-selector.js

@@ -1 +1,34 @@
-import{html}from"lit";import{detectOverflow}from"@operato/utils";function onmouseover(t){const o=t.target;detectOverflow(o)&&o.setAttribute("data-tooltip",o.textContent)}function onmouseout(t){t.target.removeAttribute("data-tooltip")}export const GristRendererMetaObjectSelector=(t,o,e,r,n)=>{let i="";if(t&&o.record.options){let e=o.record.options.nameField.split(",");i=t[e[0]],e.length>1&&(i+=`(${e.splice(1).map((o=>t[o])).join(",")})`)}return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${i}</span>`};
+/**
+ * 그리드 Resource-column 타입 셀렉터 
+ * @auth yang
+ */
+import { html } from 'lit'
+
+import { detectOverflow } from '@operato/utils'
+
+function onmouseover(e) {
+  const element = e.target;
+  if (detectOverflow(element)) {
+    element.setAttribute('data-tooltip', element.textContent)
+  }
+}
+
+function onmouseout(e) {
+  const element = e.target;
+  element.removeAttribute('data-tooltip');
+}
+
+export const GristRendererMetaObjectSelector = (value, column, record, rowIndex, field) => {
+
+  let text = '';
+  if(value && column.record.options){
+    let fields = column.record.options.nameField.split(",");
+    text = value[fields[0]];
+
+    if(fields.length > 1){
+      text+= `(${fields.splice(1).map(field => { return value[field]}).join(",")})` 
+    }
+  } 
+
+  return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`;
+}