npm - capibara - Versions diffs - 1.2.0 → 1.3.3 - Mend

capibara 1.2.0 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/app.js +1 -1
package/config.js +188 -1
package/data.js +88 -2
package/dist/index.js +321 -229
package/dist/index.js.map +1 -1
package/package.json +1 -1
package/src/lib/capibara.js +19 -2
package/src/scss/base/_utils.scss +12 -1
package/src/scss/components/_buttons.scss +20 -11
package/src/scss/components/_floatbox.scss +83 -17
package/src/scss/components/_input_nav.scss +22 -1
package/src/scss/layout/_detail_day.scss +14 -0
package/src/scss/themes/_color_themes.scss +3 -0
package/src/util/dateUtils.js +76 -80
package/src/util/domUtils.js +1 -1
package/src/util/icons.js +75 -5
package/src/util/tableElements.js +548 -534

package/src/util/tableElements.js CHANGED Viewed

@@ -2,6 +2,7 @@ import dom from "../util/domUtils";
 import utils from "../util/utils";
 import dateUtils from "../util/dateUtils";
 import icons from "../util/icons";
+import domUtils from "../util/domUtils";
 export default {
   /**
@@ -80,14 +81,14 @@ export default {
    */
   createPlotVerticalContainer(config) {
     let $elem = dom.createElement("div", {
-      className: "plot-vertical-container",
+      className: "plot-vertical-container"
     });
     return this.redrawPlotVerticalContainer(config, $elem);
   },
   createPlotHorizontalContainer(config) {
     let $elem = dom.createElement("div", {
-      className: "plot-horizontal-container",
+      className: "plot-horizontal-container"
     });
     return this.redrawPlotHorizontalContainer(config, $elem);
   },
@@ -117,8 +118,8 @@ export default {
           classNames: ["plot-vertical", p.className || ""],
           style: {
             "margin-left": left + "px",
-            height: height + "px",
-          },
+            height: height + "px"
+          }
         });
         $elem.appendChild(plot);
       });
@@ -137,8 +138,8 @@ export default {
           classNames: ["plot-horizontal", p.className || ""],
           style: {
             "margin-top": topPosition * itemHeight + "px",
-            width: width + "px",
-          },
+            width: width + "px"
+          }
         });
         $elem.appendChild(plot);
       });
@@ -218,14 +219,10 @@ export default {
     let toggleSidebarBtnString = `
           <button toggle-sidebar class="cap-btn-icon cap-btn-icon-raised cap-btn-toggle-sidebar ">
-            <span>
-              <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-                  <path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
-              </svg>
-            </span>
+          ${icons.chevronRight}
           </button> `;
-    if(config.timeline.nav.left.hideToggleSidebarButton){
+    if (config.timeline.nav.left.hideToggleSidebarButton) {
       toggleSidebarBtnString = "";
     }
@@ -282,12 +279,12 @@ export default {
     $elem.append(r);
     let toggleSidebar = $elem.querySelector("[toggle-sidebar]");
-    if(toggleSidebar){
+    if (toggleSidebar) {
       toggleSidebar.addEventListener("click", (e) => {
         r.dispatchEvent(
           new CustomEvent("toggleSidebar", {
             bubbles: true,
-            cancelable: false,
+            cancelable: false
           })
         );
       });
@@ -305,7 +302,7 @@ export default {
    * @return {Object} Elemento Dom corner
    */
   createCornerRight(config, tab = null) {
-    let $elem = dom.createElement("div", { classNames: ["corner","right"] });
+    let $elem = dom.createElement("div", { classNames: ["corner", "right"] });
     return this.redrawCornerRight($elem, config, tab);
   },
@@ -331,7 +328,7 @@ export default {
     if (config.timeline.corner.right.buttons) {
       config.timeline.corner.right.buttons.forEach((btn) => {
         let isEnabled = btn.getIsEnabled ? btn.getIsEnabled() : true;
-        if(isEnabled){
+        if (isEnabled) {
           let $btn = dom.createElementFromHTML(`
                         <button class="corner-btn cap-btn-raised">
                           ${btn.label || ""}
@@ -345,26 +342,34 @@ export default {
         }
       });
     }
-    if(config.timeline.corner.right.inputs){
-      config.timeline.corner.right.inputs.forEach(input => {
-        let $input = this.createCornerRightInput({inputConfig:input});
+    if (config.timeline.corner.right.inputs) {
+      config.timeline.corner.right.inputs.forEach((input) => {
+        let $input = this.createCornerRightInput({ inputConfig: input });
         $btnContainer.appendChild($btn);
       });
     }
     return $el;
   },
-  createCornerRightInput({inputConfig, dataDay = null, daySelected = null }){
+  createCornerRightInput({ inputConfig, dataDay = null, daySelected = null }) {
     let r = null;
-    switch(inputConfig.type){
-      case 'autocomplete-crud':
-        r = this.createCornerRightInputAutocompleteCrud({inputConfig, dataDay, daySelected});
+    switch (inputConfig.type) {
+      case "autocomplete-crud":
+        r = this.createCornerRightInputAutocompleteCrud({
+          inputConfig,
+          dataDay,
+          daySelected
+        });
         break;
     }
     return r;
   },
-  createCornerRightInputAutocompleteCrud({inputConfig, dataDay, daySelected }){
+  createCornerRightInputAutocompleteCrud({
+    inputConfig,
+    dataDay,
+    daySelected
+  }) {
     let elem = "test";
     return elem;
   },
@@ -416,8 +421,8 @@ export default {
           if (!tab.isHidden) {
             str += ` <button
                         class="tab ${tab.disabled ? "disabled" : ""}  ${
-              tab == tabSelected ? "active" : ""
-            }  ${tab.color}"
+                          tab == tabSelected ? "active" : ""
+                        }  ${tab.color}"
                         color="${tab.color}"
                         input-key="${tab.id}"
                         ${
@@ -436,7 +441,6 @@ export default {
     if (tabSelected) {
       if (tabSelected.legends) {
         str += `
         <button toggle-legends class="cap-btn-icon cap-btn-icon-raised ">
           ${icons.toggleLegends}
@@ -461,8 +465,8 @@ export default {
                         legend.tooltip ? `cap-tooltip="${legend.tooltip}"` : ""
                       } >
                   <div class="icon-legend ${colorClass} ${
-            legend.shape
-          }" style="${colorBg}"></div>
+                    legend.shape
+                  }" style="${colorBg}"></div>
                   <span>${legend.label}</span>
                 </div>`;
         });
@@ -478,83 +482,19 @@ export default {
           <button cap-btn-prev class="cap-btn-icon cap-btn-icon-raised">
-              <span class="icon">
-              <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-                  <path fill="currentColor" d="M20,10V14H11L14.5,17.5L12.08,19.92L4.16,12L12.08,4.08L14.5,6.5L11,10H20Z" />
-              </svg>
-              </span>
-              <span class="loading-icon">
-                <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-               width="32px" height="32px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
-              <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
-                s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
-                c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
-              <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
-                C22.32,8.481,24.301,9.057,26.013,10.047z">
-                <animateTransform attributeType="xml"
-                  attributeName="transform"
-                  type="rotate"
-                  from="0 20 20"
-                  to="360 20 20"
-                  dur="1.5s"
-                  repeatCount="indefinite"/>
-                </path>
-              </svg>
-              </span>
+             ${icons.arrowLeft}
+             ${icons.loadingIcon}
           </button>
           <button cap-btn-calendar class="cap-btn-icon cap-btn-icon-raised">
-            <span>
-              <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-                <path fill="currentColor" d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z" />
-              </svg>
-            </span>
-            <span class="loading-icon">
-                <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-               width="32px" height="32px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
-              <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
-                s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
-                c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
-              <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
-                C22.32,8.481,24.301,9.057,26.013,10.047z">
-                <animateTransform attributeType="xml"
-                  attributeName="transform"
-                  type="rotate"
-                  from="0 20 20"
-                  to="360 20 20"
-                  dur="1.5s"
-                  repeatCount="indefinite"/>
-                </path>
-              </svg>
-              </span>
+            ${icons.calendar}
+            ${icons.loadingIcon}
           </button>
           <button cap-btn-next class="cap-btn-icon cap-btn-icon-raised">
-            <span>
-              <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-                  <path fill="currentColor" d="M4,10V14H13L9.5,17.5L11.92,19.92L19.84,12L11.92,4.08L9.5,6.5L13,10H4Z" />
-              </svg>
-            </span>
-            <span class="loading-icon">
-                <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-               width="32px" height="32px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
-              <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
-                s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
-                c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
-              <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
-                C22.32,8.481,24.301,9.057,26.013,10.047z">
-                <animateTransform attributeType="xml"
-                  attributeName="transform"
-                  type="rotate"
-                  from="0 20 20"
-                  to="360 20 20"
-                  dur="1.5s"
-                  repeatCount="indefinite"/>
-                </path>
-              </svg>
-              </span>
+            ${icons.arrowRight}
+            ${icons.loadingIcon}
           </button>
           <div class="spacer"></div>
@@ -562,25 +502,13 @@ export default {
           <button toggle-dark class="cap-btn-icon cap-btn-header c-d-mobile-none ${
             config.timeline.withDarkToggle == false ? "hide" : ""
           }">
-            <span class="hide-light">
-              <svg width="24" height="24" viewBox="0 0 24 24">
-                <path  fill="currentColor" d="M13,4.8C9,4.8 9,19.2 13,19.2C17,19.2 22,16.5 22,12C22,7.5 17,4.8 13,4.8M13.1,17.2C12.7,16.8 12,15 12,12C12,9 12.7,7.2 13.1,6.8C16,6.9 20,8.7 20,12C20,15.3 15.9,17.1 13.1,17.2M8,10.5C8,11 7.9,11.5 7.9,12C7.9,12.2 7.9,12.4 7.9,12.6L2.4,14L1.9,12.1L8,10.5M2,7L9.4,5.1C9.2,5.4 9,5.8 8.9,6.3C8.8,6.6 8.7,7 8.6,7.4L2.5,8.9L2,7M8.2,15.5C8.3,16.2 8.5,16.9 8.7,17.4L2.4,19L1.9,17.1L8.2,15.5Z" />
-              </svg>
-            </span>
-            <span class="hide-dark">
-              <svg width="24" height="24" viewBox="0 0 24 24">
-                <path  fill="currentColor" d="M13,4.8C9,4.8 9,19.2 13,19.2C17,19.2 22,16.5 22,12C22,7.5 17,4.8 13,4.8M13.1,17.2C12.7,16.8 12,15 12,12C12,9 12.7,7.2 13.1,6.8C16,6.9 20,8.7 20,12C20,15.3 16,17.1 13.1,17.2M2,5H9.5C9.3,5.4 9,5.8 8.9,6.4C8.8,6.6 8.8,6.8 8.7,7H2V5M8,11H2V9H8.2C8.1,9.6 8.1,10.3 8,11M8.7,17C8.9,17.8 9.2,18.4 9.6,19H2.1V17H8.7M8.2,15H2V13H8C8.1,13.7 8.1,14.4 8.2,15Z" />
-              </svg>
-            </span>
+            ${icons.dark}
+            ${icons.light}
           </button>`;
     if (config.timeline.header.extend.enabled !== false) {
       str += `<button toggle-header class="cap-btn-icon cap-btn-icon-raised">
-            <span>
-              <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-                  <path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
-              </svg>
-            </span>
+          ${icons.chevronDown}
           </button>`;
     }
@@ -631,7 +559,7 @@ export default {
         $r.dispatchEvent(
           new CustomEvent("toggleDark", {
             bubbles: true,
-            cancelable: false,
+            cancelable: false
           })
         );
       });
@@ -646,7 +574,7 @@ export default {
           new CustomEvent("clickCalendarIcon", {
             bubbles: true,
             cancelable: false,
-            detail: { x, y },
+            detail: { x, y }
           })
         );
       });
@@ -658,7 +586,7 @@ export default {
         $r.dispatchEvent(
           new CustomEvent("toggleHeader", {
             bubbles: true,
-            cancelable: false,
+            cancelable: false
           })
         );
       });
@@ -679,8 +607,8 @@ export default {
           bubbles: true,
           cancelable: false,
           detail: {
-            originalEvt: e,
-          },
+            originalEvt: e
+          }
         })
       );
     });
@@ -691,8 +619,8 @@ export default {
           bubbles: true,
           cancelable: false,
           detail: {
-            originalEvt: e,
-          },
+            originalEvt: e
+          }
         })
       );
     });
@@ -703,8 +631,8 @@ export default {
           bubbles: true,
           cancelable: false,
           detail: {
-            originalEvt: e,
-          },
+            originalEvt: e
+          }
         })
       );
     });
@@ -734,8 +662,8 @@ export default {
                 cancelable: false,
                 detail: {
                   legend: legendSelected,
-                  $legend,
-                },
+                  $legend
+                }
               })
             );
           }
@@ -755,8 +683,8 @@ export default {
                 bubbles: true,
                 cancelable: false,
                 detail: {
-                  tab: tabSelected,
-                },
+                  tab: tabSelected
+                }
               })
             );
           }
@@ -776,8 +704,8 @@ export default {
                 bubbles: true,
                 cancelable: false,
                 detail: {
-                  tab: tabSelected,
-                },
+                  tab: tabSelected
+                }
               })
             );
           }
@@ -867,8 +795,8 @@ export default {
                 $elem: $dia,
                 date: $dia.getAttribute("date"),
                 clientX: evt.clientX,
-                clientY: evt.clientY,
-              },
+                clientY: evt.clientY
+              }
             })
           );
         });
@@ -880,8 +808,8 @@ export default {
               cancelable: false,
               detail: {
                 $elem: $dia,
-                date: $dia.getAttribute("date"),
-              },
+                date: $dia.getAttribute("date")
+              }
             })
           );
         });
@@ -937,8 +865,8 @@ export default {
                       <span date="${date}"
                             index="${d_index}"
                             class="${date.varName} ${
-              d.color ? "c-" + d.color + "--text" : ""
-            }" >
+                              d.color ? "c-" + d.color + "--text" : ""
+                            }" >
                             ${value}
                             </span>
                     </div>`;
@@ -988,8 +916,8 @@ export default {
             detail: {
               date: date,
               typeData: typeData,
-              value: value,
-            },
+              value: value
+            }
           })
         );
       });
@@ -1050,15 +978,17 @@ export default {
         navList += `<button class="tree-icon ${
           d.isClosed ? "" : "cap-rotate"
         }" item-id="${d.id || -1}" type-node="${d.type || ""}" >
-        ${icons.arrow}
+        ${icons.chevronDown}
                        </button>`;
       }
       navList += `
           <div class="item-title truncate full-width ${
-                      d.clickeable ? "clickeable" : "" }
-                      ${ d.navOver? "hoverable" : ""
-          } " item-id="${d.id || -1}" type-node="${d.type || ""}" >
+            d.clickeable ? "clickeable" : ""
+          }
+                      ${d.navOver ? "hoverable" : ""} " item-id="${
+                        d.id || -1
+                      }" type-node="${d.type || ""}" >
             ${d.label}
           </div>
         </div>`;
@@ -1094,10 +1024,10 @@ export default {
                         : ""
                     }
-                    <div class="item-title ${
-                      c.clickeable ? "clickeable" : "" }
-                      ${ c.navOver? "hoverable" : ""
-                    }" item-id="${c.id || -1}" type-node="${c.type || ""}">
+                    <div class="item-title ${c.clickeable ? "clickeable" : ""}
+                      ${c.navOver ? "hoverable" : ""}" item-id="${
+                        c.id || -1
+                      }" type-node="${c.type || ""}">
                       <div class="truncate">
                         ${c.label}
                       </div>
@@ -1116,7 +1046,7 @@ export default {
       initialNavList += `<div class="initial-nav-item parent">`;
       if (d.withNav) {
         config.timeline.nav.left.initial.vars.forEach((v) => {
-          let value = utils.getVarByPath(d.values, v.varName)
+          let value = utils.getVarByPath(d.values, v.varName);
           if (v.round && !isNaN(value)) {
             value = utils.round(value, v.round);
@@ -1188,11 +1118,11 @@ export default {
             d.isClosed ? "hide" : ""
           }" child="${d.id || -1}">`;
-          if(c.withNav !== false){
+          if (c.withNav !== false) {
             config.timeline.nav.left.initial.vars.forEach((v) => {
               if (v.onlyTab && tab && v.onlyTab !== tab.key) return;
-              let value = utils.getVarByPath(c.values, v.varName)
+              let value = utils.getVarByPath(c.values, v.varName);
               if (v.round && !isNaN(value)) {
                 value = utils.round(value, v.round);
               }
@@ -1251,7 +1181,7 @@ export default {
                                 </div>`;
               }
             });
-            }
+          }
           initialNavList += `
                       </div>`;
         });
@@ -1261,7 +1191,7 @@ export default {
       exNavList += `<div class="ex-nav-item parent">`;
       if (d.withExNav) {
         config.timeline.nav.left.extend.vars.forEach((v) => {
-          let value = utils.getVarByPath(d.values, v.varName)
+          let value = utils.getVarByPath(d.values, v.varName);
           if (v.round && !isNaN(value)) {
             value = utils.round(value, v.round);
           }
@@ -1332,11 +1262,11 @@ export default {
             d.isClosed ? "hide" : ""
           }" child="${d.id || -1}">`;
-          if(c.withNav !== false){
+          if (c.withNav !== false) {
             config.timeline.nav.left.extend.vars.forEach((v) => {
               if (v.onlyTab && tab && v.onlyTab !== tab.key) return;
-              let value = utils.getVarByPath(c.values, v.varName)
+              let value = utils.getVarByPath(c.values, v.varName);
               if (v.round && !isNaN(value)) {
                 value = utils.round(value, v.round);
               }
@@ -1465,7 +1395,7 @@ export default {
             config.timeline.nav.left.buttons.vars
           ) {
             config.timeline.nav.left.buttons.vars.forEach((btn) => {
-              if(c.withNav !== false){
+              if (c.withNav !== false) {
                 let btnContent = "";
                 let className = btn.className || "";
@@ -1474,7 +1404,9 @@ export default {
                 }
                 if (btn.iconFormatter) {
-                  btnContent = btn.iconFormatter ? btn.iconFormatter(c, btn) : "";
+                  btnContent = btn.iconFormatter
+                    ? btn.iconFormatter(c, btn)
+                    : "";
                 }
                 if (btn.shape) {
@@ -1498,7 +1430,6 @@ export default {
                               type-node="${c.type || ""}">
                               ${btnContent}
                       </button>`;
               }
             });
           }
@@ -1549,8 +1480,8 @@ export default {
               originalEvt: e,
               item: item,
               type: typeNode,
-              pos: pos,
-            },
+              pos: pos
+            }
           })
         );
       });
@@ -1562,7 +1493,7 @@ export default {
         i.dispatchEvent(
           new CustomEvent("leaveNavItem", {
             bubbles: true,
-            cancelable: false,
+            cancelable: false
           })
         );
       });
@@ -1574,7 +1505,7 @@ export default {
         i.dispatchEvent(
           new CustomEvent("leaveNavItem", {
             bubbles: true,
-            cancelable: false,
+            cancelable: false
           })
         );
       });
@@ -1592,8 +1523,8 @@ export default {
             detail: {
               itemId: itemId,
               type: typeNode,
-              value: value,
-            },
+              value: value
+            }
           })
         );
       });
@@ -1624,8 +1555,8 @@ export default {
               item: item,
               type: typeNode,
               value: value,
-              tabSelected: tab,
-            },
+              tabSelected: tab
+            }
           })
         );
       });
@@ -1643,8 +1574,8 @@ export default {
             detail: {
               key: key,
               itemId: itemId,
-              type: typeNode,
-            },
+              type: typeNode
+            }
           })
         );
       });
@@ -1682,8 +1613,8 @@ export default {
             cancelable: false,
             detail: {
               itemId: itemId,
-              type: typeNode,
-            },
+              type: typeNode
+            }
           })
         );
@@ -1763,7 +1694,7 @@ export default {
   ) {
     let $navRight = $elem; //dom.createElement("nav",{className:"right"});
     let $divContainer = dom.createElement("div", {
-      className: "nav-input-container",
+      className: "nav-input-container"
     });
     let $inputs = [];
     let checkboxInputs = [];
@@ -1967,7 +1898,7 @@ export default {
     diff += dayWidth / 2 - 2; // para centrar linea
     Object.assign($elem.style, {
       "margin-left": diff + "px",
-      height: height + "px",
+      height: height + "px"
     });
     return $elem;
   },
@@ -1981,7 +1912,7 @@ export default {
    */
   createFloatBox(config, tab) {
     let $container = dom.createElement("div", {
-      className: "float-box-container",
+      className: "float-box-container"
     });
     return this.redrawFloatBox(config, tab, $container);
   },
@@ -2012,19 +1943,18 @@ export default {
         ds.data.forEach((data) => {
           if (
             (!data.message || data.message.value == null) &&
-            (data.values == null || data.values == undefined ||
-            Object.entries(data.values).length === 0 )
-          ){
+            (data.values == null ||
+              data.values == undefined ||
+              Object.entries(data.values).length === 0)
+          ) {
             return null;
           }
           //children Data
           let position = this.getPositionFloatBox(config, data, ds);
           let className = "";
           if (data.errors && data.errors.length > 0) {
             className += "has-errors ";
           }
@@ -2034,7 +1964,7 @@ export default {
           }
           let msg = null;
-          if(tab.floatBox.messagePath){
+          if (tab.floaBox && tab.floatBox.messagePath) {
             msg = utils.getVarByPath(data, tab.floatBox.messagePath);
           }
@@ -2042,14 +1972,12 @@ export default {
             className += "has-message ";
           }
           let str = `
                 <div class="float-box ${className} ${de.isClosed ? "hide" : ""}"
                      style="${position ? position : ""}"
                      item-id="${ds.id || -1}"
                      type-node="${ds.type || ""}"> `;
           let strExt = `
                 <div class="float-box-ext ${de.isClosed ? "hide" : ""}"
                       style="${position ? position : ""}"
@@ -2057,16 +1985,30 @@ export default {
                       type-node="${ds.type || ""}">
                   <div class="long-bar-container">`;
           if (tab && tab.floatBox) {
+            if (tab.floatBox.plots) {
+              str += `<div class="plot-floatbox-container">`;
+              tab.floatBox.plots.forEach((n) => {
+                let cssVars = "";
+                if (utils.getVarByPath(data.values, n.varName) !== null) {
+                  if (n.color) {
+                    cssVars = `--local-color:${n.color};`;
+                  }
+                  str += `<div class="plot-floatbox ${
+                    n.style || ""
+                  }" style="${cssVars} "></div>`;
+                }
+              });
+              str += `
+                        </div>`;
+            }
             //numeros en el floatBox
             if (tab.floatBox.nums) {
               tab.floatBox.nums.forEach((n) => {
                 if (tab.legends && n.tabKey) {
-                  let legend =tab.legends.find(
-                    (l) => l.key == n.tabKey
-                  );
+                  let legend = tab.legends.find((l) => l.key == n.tabKey);
                   if (legend && !legend.active) return;
                 }
@@ -2080,7 +2022,6 @@ export default {
                 let colorStyleExt = "";
                 let cssVars = "";
                 if (n.varName) {
                   dataFloatBox = utils.getVarByPath(data.values, n.varName);
                 }
@@ -2111,13 +2052,15 @@ export default {
                     data.values,
                     n.longBarColor
                   );
-                  let longBarOpacity = utils.getVarByPath(
-                    data.values,
-                    n.longBarOpacity
-                  ) || null;
+                  let longBarOpacity =
+                    utils.getVarByPath(data.values, n.longBarOpacity) || null;
                   if (longBarColor) {
                     if (utils.isHexColor(longBarColor)) {
-                      colorStyleExt = `--local-color: ${longBarColor}; ${ longBarOpacity ? "--local-opacity: "+longBarOpacity: '' }; `;
+                      colorStyleExt = `--local-color: ${longBarColor}; ${
+                        longBarOpacity
+                          ? "--local-opacity: " + longBarOpacity
+                          : ""
+                      }; `;
                     } else {
                       colorClassExt = longBarColor;
                     }
@@ -2128,63 +2071,74 @@ export default {
                   }
                 }
-                if(n.longBar){
-                  let longBar = utils.getVarByPath(data.values,n.longBar);
-                  if(longBar){
+                if (n.longBar) {
+                  let longBar = utils.getVarByPath(data.values, n.longBar);
+                  if (longBar) {
                     cssVars = `--long:${longBar};`;
                   }
                 }
                 if (dataFloatBox !== null && showIf && !hideIf) {
                   str += `<span class="data ${colorClass} ${className}" style="${colorStyle}">
-                                ${typeof dataFloatBox == "string" ? dataFloatBox : ''}
-                                ${typeof dataFloatBox == "number" ? utils.round(dataFloatBox, n.round) : ''}
+                                ${
+                                  typeof dataFloatBox == "string"
+                                    ? dataFloatBox
+                                    : ""
+                                }
+                                ${
+                                  typeof dataFloatBox == "number"
+                                    ? utils.round(dataFloatBox, n.round)
+                                    : ""
+                                }
                               </span>`;
-                  if(n.longBar && cssVars){
+                  if (n.longBar && cssVars) {
                     strExt += `<div class="long-bar ${colorClassExt}" style="${colorStyleExt} ${cssVars} "></div> `;
                   }
                 }
               });
             }
+            //puntos en el floatBox
+            if (tab.floatBox.dots) {
+              str += `<div class="dot-container-middle">`;
+              tab.floatBox.dots.forEach((dot) => {
+                if (utils.getVarByPath(data.values, dot.varName) !== null) {
+                  let className = "";
+                  let colorClass = "";
+                  let colorStyle = "";
+                  if (dot.shape) {
+                    className +=  dot.shape;
+                  }
+                  if (dot.color) {
+                    if (utils.isHexColor(dot.color)) {
+                      colorStyle = `--local-color: ${dot.color}`;
+                    } else {
+                      colorClass = dot.color;
+                    }
+                  }
-            //puntos en el floatBox
-            if (tab.floatBox.dots) {
-              str += `
-                      <div class="dot-container-middle">`;
-              tab.floatBox.dots.forEach((n) => {
-                if (utils.getVarByPath(data.values, n.varName) !== null) {
                   str += `
-                            <div class="dot ${n.color} ${
-                    n.shape || ""
-                  }"></div>`;
+                       <div class="dot ${colorClass} ${className}" style="${colorStyle}" ></div>`;
                 }
               });
               str += `
                         </div>`;
             }
             //fila de puntos en floatBox
             if (tab.floatBox.rowDots) {
               tab.floatBox.rowDots.forEach((row) => {
                 let freeColumns = 4;
                 str += `<span class="rowdot--row ">`;
-                row.forEach(dot => {
+                row.forEach((dot) => {
                   if (tab.legends && dot.tabKey) {
-                    let legend =tab.legends.find(
-                      (l) => l.key == dot.tabKey
-                    );
+                    let legend = tab.legends.find((l) => l.key == dot.tabKey);
                     if (legend && !legend.active) return;
                   }
@@ -2195,60 +2149,64 @@ export default {
                   let colorClass = "";
                   let colorStyle = "";
-                  if ( dot.varName) {
+                  if (dot.varName) {
                     dataFloatBox = utils.getVarByPath(data.values, dot.varName);
                     dataFloatBox = parseInt(dataFloatBox);
                   }
-                  if ( dot.varShow) {
-                    showIf = Boolean(utils.getVarByPath(data.values, dot.varShow));
+                  if (dot.varShow) {
+                    showIf = Boolean(
+                      utils.getVarByPath(data.values, dot.varShow)
+                    );
                     dataFloatBox = dataFloatBox || "";
                   }
-                  if ( dot.varHide) {
-                    hideIf = Boolean(utils.getVarByPath(data.values, dot.varHide));
+                  if (dot.varHide) {
+                    hideIf = Boolean(
+                      utils.getVarByPath(data.values, dot.varHide)
+                    );
                   }
-                  if ( dot.shape) {
+                  if (dot.shape) {
                     className += " shape-" + dot.shape;
                   }
-                  if ( dot.color) {
-                    if (utils.isHexColor( dot.color)) {
-                      colorStyle = `--local-color: ${ dot.color}`;
+                  if (dot.color) {
+                    if (utils.isHexColor(dot.color)) {
+                      colorStyle = `--local-color: ${dot.color}`;
                     } else {
                       colorClass = dot.color;
                     }
                   }
-                  if (dataFloatBox !== null && dataFloatBox > 0 && showIf && !hideIf && freeColumns > 0) {
-                    let n = dataFloatBox > freeColumns ? freeColumns : dataFloatBox;
+                  if (
+                    dataFloatBox !== null &&
+                    dataFloatBox > 0 &&
+                    showIf &&
+                    !hideIf &&
+                    freeColumns > 0
+                  ) {
+                    let n =
+                      dataFloatBox > freeColumns ? freeColumns : dataFloatBox;
                     freeColumns -= n;
-                    for (let index = 0; index < n ; index++) {
+                    for (let index = 0; index < n; index++) {
                       str += `<div class="rowdot--dot ${colorClass} ${className}" style="${colorStyle}"></div>`;
                     }
                   }
                 });
                 str += `</span>`;
-                });
+              });
             }
           }
           str += `
                 </div>`;
           strExt += `
               </div>
-                </div>`
+                </div>`;
           let $elem = dom.createElementFromHTML(str);
           let $elemExt = dom.createElementFromHTML(strExt);
@@ -2260,8 +2218,8 @@ export default {
                 detail: {
                   item: ds,
                   data: data,
-                  originalEvt: e,
-                },
+                  originalEvt: e
+                }
               })
             );
           });
@@ -2274,8 +2232,8 @@ export default {
                 detail: {
                   item: ds,
                   data: data,
-                  originalEvt: e,
-                },
+                  originalEvt: e
+                }
               })
             );
           });
@@ -2304,7 +2262,13 @@ export default {
    * @param {Boolean} [onlyStringContent = false] - para escoger si devuelve String o DomElement
    * @return {String|Object} Elemento como String o DomElement
    */
-  createDetailDay(config, item = {}, dataDay, tabSelected, onlyStringContent = false) {
+  createDetailDay(
+    config,
+    item = {},
+    dataDay,
+    tabSelected,
+    onlyStringContent = false
+  ) {
     let str = `
           <div class="header-detail">
             <div class="title truncate">
@@ -2323,8 +2287,8 @@ export default {
         //para comprobar si tiene datos, se obtiene el primer valor
         //de la lista de values de una capsula
         let hasValues =
-          cap.values.filter((v) =>
-            utils.getVarByPath(dataDay.values, v.varName) !== null
+          cap.values.filter(
+            (v) => utils.getVarByPath(dataDay.values, v.varName) !== null
           ).length > 0;
         let hideIf = false;
@@ -2359,8 +2323,9 @@ export default {
           <div class="item-description"> `;
           cap.values.forEach((v) => {
-            let value = v.varName ? utils.getVarByPath(dataDay.values, v.varName) : null;
+            let value = v.varName
+              ? utils.getVarByPath(dataDay.values, v.varName)
+              : null;
             if (cap.isLabeledArray) {
               value.forEach((valueLabeled) => {
@@ -2370,14 +2335,16 @@ export default {
                 let tempValue = utils.getVarByPath(valueLabeled, valueName);
                 if (tempValue) {
-                  outputValue = v.round ? utils.round(tempValue, v.round) : tempValue;
+                  outputValue = v.round
+                    ? utils.round(tempValue, v.round)
+                    : tempValue;
                 }
                 if (v.formatter) {
                   outputValue = v.formatter(valueLabeled);
                 }
-                if(typeof outputValue == "number"){
+                if (typeof outputValue == "number") {
                   outputValue = utils.formatNumber(outputValue);
                 }
@@ -2385,9 +2352,9 @@ export default {
                   outputValue == null
                     ? ""
                     : `
-                      <div class="desc ${v.showColumn ? 'desc-column' : ''}">
+                      <div class="desc ${v.showColumn ? "desc-column" : ""}">
                         <div class="label">
-                          ${ v.hideLabel ? "" :  valueLabeled.label}
+                          ${v.hideLabel ? "" : valueLabeled.label}
                         </div >
                         <div class="val">
                           <span class="prefix">
@@ -2406,14 +2373,13 @@ export default {
               let outputValue = v.round ? utils.round(value, v.round) : value;
               if (v.formatter) {
-                outputValue = v.formatter({options:v,dataDay, outputValue});
+                outputValue = v.formatter({ options: v, dataDay, outputValue });
               }
-              if(typeof outputValue == "number"){
+              if (typeof outputValue == "number") {
                 outputValue = utils.formatNumber(outputValue);
               }
               str +=
                 outputValue == null
                   ? ""
@@ -2458,7 +2424,7 @@ export default {
       dataDay.values[config.timeline.detailDay.pillsVarName].forEach((e) => {
         let value = e.value;
-        if(typeof outputValue == "number"){
+        if (typeof outputValue == "number") {
           value = utils.formatNumber(value);
         }
@@ -2478,14 +2444,9 @@ export default {
     if (dataDay && dataDay.errors && dataDay.errors.length > 0) {
       dataDay.errors.forEach((err) => {
-        let alertIcon = `<span class="alert-icon">
-                          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-                              <path fill="currentColor" d="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" />
-                          </svg>
-                        </span>`;
         str += `
           <div class="alert">
-            ${alertIcon}
+            ${icons.alert}
             ${err.label}
           </div>`;
       });
@@ -2494,16 +2455,16 @@ export default {
     let msg = null;
     let author = null;
     let dateMsg = null;
-    if (dataDay ) {
+    if (dataDay && tabSelected.floatBox && tabSelected.floatBox.messagePath) {
       msg = utils.getVarByPath(dataDay, tabSelected.floatBox.messagePath);
-      if(!msg && dataDay.message && dataDay.message.value){
+      if (!msg && dataDay.message && dataDay.message.value) {
         msg = dataDay.message.value;
         author = dataDay.message.author;
-        dateMsg = dateUtils.formatDateReadeable( new Date(dataDay.message.date));
+        dateMsg = dateUtils.formatDateReadeable(new Date(dataDay.message.date));
       }
     }
-    if(msg){
+    if (msg) {
       //msg = msg.replace(/(\r\n|\r|\n)/g, '<br>');
       str += `
           <div class="msj-container">
@@ -2533,7 +2494,7 @@ export default {
    * @return {String} Elemento como String, de detailDay
    */
   redrawDetailDay(config, item, dataDay, tabSelected) {
-    return this.createDetailDay(config, item, dataDay, tabSelected,true);
+    return this.createDetailDay(config, item, dataDay, tabSelected, true);
   },
   /**
@@ -2588,7 +2549,7 @@ export default {
         }
         let $s = dom.createElement("div", {
           className: "selected-day",
-          attributes,
+          attributes
         });
         $s.style.left = s.pos.left + "px";
         $s.style.top = s.pos.top + "px";
@@ -2629,8 +2590,8 @@ export default {
   createButton(props) {
     return dom.createElementFromHTML(`
             <button class="${props.className || ""}" input-key="${
-      props.key || ""
-    }">
+              props.key || ""
+            }">
               ${props.label || ""}
             </button>`);
   },
@@ -2643,11 +2604,11 @@ export default {
   createNavRightbuttons() {
     let saveBtn = this.createButton({
       label: "Guardar",
-      className: "cap-btn-raised",
+      className: "cap-btn-raised"
     });
     let cancelBtn = this.createButton({
       label: "Cancelar",
-      className: "cap-btn-outline",
+      className: "cap-btn-outline"
     });
     let btnSection = dom.createElementFromHTML(
       `<div class="button-section"></div>`
@@ -2659,7 +2620,7 @@ export default {
       saveBtn.dispatchEvent(
         new CustomEvent("saveMultiInput", {
           bubbles: true,
-          cancelable: false,
+          cancelable: false
         })
       );
     });
@@ -2668,7 +2629,7 @@ export default {
       cancelBtn.dispatchEvent(
         new CustomEvent("cancelMultiInput", {
           bubbles: true,
-          cancelable: false,
+          cancelable: false
         })
       );
     });
@@ -2687,11 +2648,12 @@ export default {
   createInput(props, dataDay = null, daySelected = null, selected = []) {
     let r = null;
-    if (props.isHidden) return r;
+    if (props.ignoreRender == true) return r;
     switch (props.type) {
-      case "inputList":
-        r = this.createInputList(props, dataDay, daySelected);
+      case "custom":
+        r = props.render ? props.render({props, dataDay, daySelected, selected}) : null;
+        r.setAttribute("input-key", props.key);
         break;
       case "select":
         r = this.createInputSelect(props, dataDay, daySelected);
@@ -2705,7 +2667,7 @@ export default {
       case "text":
         r = this.createText(props, selected);
         break;
-      case "title":
+      case "title":
         r = this.createTitle(props);
         break;
       case "number":
@@ -2723,6 +2685,9 @@ export default {
       case "checkbox":
         r = this.createInputCheckbox(props, dataDay);
         break;
+      case "inputList":
+        r = this.createInputList(props, dataDay, daySelected);
+        break;
       case "input-box":
         r = this.createInputBox(props, dataDay);
         break;
@@ -2735,6 +2700,9 @@ export default {
       case "button":
         r = this.createInputButton(props, dataDay);
         break;
+      case "buttons-group":
+        r = this.createInputButtonsGroup(props, dataDay);
+        break;
       case "time":
         r = this.createInputTime(props, dataDay);
         break;
@@ -2771,62 +2739,67 @@ export default {
       }
     }
-    let r = dom.createElementFromHTML(`
-          <div class="input-section" input-key="${props.key || ""}">
+    let $elem = dom.createElementFromHTML(`
+          <div class="input-section ${props.isHidden ? 'hide':''} " input-key="${props.key || ""}">
             <span class="text-subtitle d-block">
               ${props.label || ""}
             </span>
-            <div class="time">
-              <input type="number"
-                     class="hour"
-                     id="test"
-                     placeholder="00"
-                     min="0"
-                     max="24"
-                     value="${hhValue}">
-              <span class="symbol">:</span>
-              <input type="number"
-                     class="minutes"
-                     placeholder="00"
-                     min="0"
-                     max="59"
-                     value="${mmValue}">
+            <div class="d-flex">
+              <div class="time">
+                <input type="number"
+                      class="hour"
+                      id="test"
+                      placeholder="00"
+                      min="0"
+                      max="24"
+                      value="${hhValue}">
+                <span class="symbol">:</span>
+                <input type="number"
+                      class="minutes"
+                      placeholder="00"
+                      min="0"
+                      max="59"
+                      value="${mmValue}">
+              </div>
+              <span class="text-hint">
+                ${props.textHint || ""}
+              </span>
             </div>
           </div>`);
-    let hh = r.querySelector(".hour");
-    let mm = r.querySelector(".minutes");
+    let $hhInput = $elem.querySelector(".hour");
+    let $mmInput = $elem.querySelector(".minutes");
-    hh.addEventListener("input", (e) => {
-      hh.dispatchEvent(
+    $hhInput.addEventListener("input", (e) => {
+      $hhInput.dispatchEvent(
         new CustomEvent("changeTimeInputHH", {
           bubbles: true,
           cancelable: false,
           detail: {
             key: props.key,
-            value: e.srcElement.value,
-          },
+            value: e.srcElement.value
+          }
         })
       );
     });
-    mm.addEventListener("input", (e) => {
-      mm.dispatchEvent(
+    $mmInput.addEventListener("input", (e) => {
+      $mmInput.dispatchEvent(
         new CustomEvent("changeTimeInputMM", {
           bubbles: true,
           cancelable: false,
           detail: {
             key: props.key,
-            value: e.srcElement.value,
-          },
+            value: e.srcElement.value
+          }
         })
       );
     });
-    this.addKeyDownInputEvents(hh);
-    this.addKeyDownInputEvents(mm);
+    this.addKeyDownInputEvents($hhInput, $elem, props);
+    this.addKeyDownInputEvents($mmInput, $elem, props);
-    return r;
+    return $elem;
   },
   /**
@@ -2842,7 +2815,7 @@ export default {
       label = props.formatter({ selected });
     }
     let $elem = dom.createElementFromHTML(`
-          <div class="input-section" input-key="${props.key || ""}">
+          <div class="input-section ${props.isHidden ? 'hide':''} " input-key="${props.key || ""}">
             <span class="${props.classNames || ""}">
             ${label}
             </span>
@@ -2863,7 +2836,7 @@ export default {
       classNames = "text-subtitle";
     }
     return dom.createElementFromHTML(`
-          <div class="input-section" input-key="${props.key || ""}">
+          <div class="input-section ${props.isHidden ? 'hide': ''} " input-key="${props.key || ""}">
             <span class="${classNames}">
               ${props.label}
             </span>
@@ -2885,9 +2858,9 @@ export default {
     value = value || "";
     let elem = dom.createElementFromHTML(`
-          <div class="input-section ${props.classNames || ""}" input-key="${
-      props.key || ""
-    }">
+          <div class="input-section ${props.classNames || ""} ${props.isHidden ? 'hide':''} " input-key="${
+            props.key || ""
+          }">
             <div class="input-section-title">
               <span class="text-subtitle">
                 ${props.label}
@@ -2896,13 +2869,20 @@ export default {
                 ${props.suffix ? "(" + props.suffix + ")" : ""}
               </span>
             </div>
-            <input type="number"
-                  class="nav-input"
-                  value="${value}">
+            <div class="d-flex">
+              <input type="number"
+                    class="nav-input"
+                    value="${value}">
+              <span class="text-hint">
+                  ${props.textHint || ""}
+              </span>
+            </div>
           </div>`);
     let inputElem = elem.querySelector("input");
-    this.addKeyDownInputEvents(inputElem);
+    this.addKeyDownInputEvents(inputElem, elem, props);
     return elem;
   },
@@ -2930,9 +2910,9 @@ export default {
     filePath = filePath || "";
     let elem = dom.createElementFromHTML(`
-          <div class="input-section ${props.classNames || ""}" input-key="${
-      props.key || ""
-    }">
+          <div class="input-section ${props.classNames || ""} ${props.isHidden ? 'hide':''} " input-key="${
+            props.key || ""
+          }">
             <div class="input-section-title">
               <span class="text-subtitle">
@@ -2976,7 +2956,6 @@ export default {
     return elem;
   },
   createFileLink(props, dataDay) {
     let fileName = "";
     let filePath = "";
@@ -2987,15 +2966,15 @@ export default {
       filePath = utils.getVarByPath(dataDay, props.filePathValue);
     }
-    if(fileName == "") return null;
+    if (fileName == "") return null;
     fileName = fileName || "";
     filePath = filePath || "";
     let elem = dom.createElementFromHTML(`
-          <div class="input-section ${props.classNames || ""}" input-key="${
-      props.key || ""
-    }">
+          <div class="input-section ${props.classNames || ""} ${props.isHidden ? 'hide':''} " input-key="${
+            props.key || ""
+          }">
             <div class="input-section-title">
               <span class="text-subtitle">
@@ -3023,7 +3002,6 @@ export default {
    * @return {Object} Elemento Dom del input creado
    */
   createInputList(props, dataDay, daySelected = null) {
-    let value = null;
     let inputList = [];
     //obtiene inputs default, para crearlos, sin valores
@@ -3055,7 +3033,7 @@ export default {
       });
     }
-    let str = `<div input-key="${props.key || ""}" class="input-section-list">
+    let str = `<div input-key="${props.key || ""}" class="input-section-list ${props.isHidden ? 'hide': ''} ">
             <div class="input-section-title">
               <span class="text-title">
                 ${props.label}
@@ -3063,7 +3041,9 @@ export default {
             </div>`;
     inputList.forEach((inputRow) => {
       str += `
-                  <div class="input-section ${props.toRight ? 'to-right': ''}" >
+                  <div class="input-section ${
+                    props.toRight ? "to-right" : ""
+                  }" >
                       <span class="text-subtitle">
                         ${inputRow.label}
                       </span>`;
@@ -3089,11 +3069,10 @@ export default {
     let elem = dom.createElementFromHTML(str);
     let inputsElem = elem.querySelectorAll("input");
-    inputsElem.forEach((inputElem) => this.addKeyDownInputEvents(inputElem));
+    inputsElem.forEach((inputElem) => this.addKeyDownInputEvents(inputElem, elem, props));
     return elem;
   },
   createInputSelect(props, dataDay, daySelected = null) {
     let value = null;
     let options = props.options;
@@ -3103,7 +3082,7 @@ export default {
       value = val ? val.value : null;
     }
-    let str = `<div input-key="${props.key || ""}" >
+    let str = `<div input-key="${props.key || ""}" class="${props.isHidden ? 'hide': ''}" >
                   <div class="input-section " >
                       <span class="text-subtitle">
                         ${props.label}
@@ -3111,21 +3090,22 @@ export default {
                       <select class="input-select">
-                 <option value="" ${value == null ? 'selected' : ''}>
+                 <option value="" ${value == null ? "selected" : ""}>
                   ${props.noDataLabel || "-- sin asignar --"}
                  </option>
         `;
-      options.forEach((option) => {
-        str += `
-                 <option value="${option.id}" ${option.id == value ? 'selected' : ''}>
+    options.forEach((option) => {
+      str += `
+                 <option value="${option.id}" ${
+                   option.id == value ? "selected" : ""
+                 }>
                  ${option.label}
                  </option>
                 `;
-      });
-      str += `
+    });
+    str += `
                       </select>
                   </div>
@@ -3150,7 +3130,7 @@ export default {
       value = utils.getVarByPath(dataDay, props.varName);
     }
     let elem = dom.createElementFromHTML(`
-          <div class="input-section" input-key="${props.key || ""}">
+          <div class="input-section ${props.isHidden ? 'hide':''} " input-key="${props.key || ""}">
             <span class="text-subtitle d-block">
               ${props.label}
             </span>
@@ -3158,7 +3138,7 @@ export default {
           </div>`);
     let inputElem = elem.querySelector("textarea");
-    this.addKeyDownInputEvents(inputElem);
+    this.addKeyDownInputEvents(inputElem, elem, props);
     return elem;
   },
@@ -3173,7 +3153,7 @@ export default {
   createInputMessage(props, dataDay) {
     let value = dataDay ? utils.getVarByPath(dataDay, props.varName) : null;
     let elem = dom.createElementFromHTML(`
-          <div class="input-section msj-input-container"
+          <div class="input-section msj-input-container ${props.isHidden ? 'hide':''} "
               input-key="${props.key || ""}">
             <span class="text-subtitle d-block">
               Mensaje
@@ -3199,7 +3179,7 @@ export default {
       value = utils.getVarByPath(dataDay, props.varName);
     }
     let elem = dom.createElementFromHTML(`
-          <div class="input-section" input-key="${props.key || ""}">
+          <div class="input-section ${props.isHidden ? 'hide':''} " input-key="${props.key || ""}">
             <span class="text-subtitle d-block">
               ${props.label}
             </span>
@@ -3207,7 +3187,7 @@ export default {
           </div>`);
     let inputElem = elem.querySelector("input");
-    this.addKeyDownInputEvents(inputElem);
+    this.addKeyDownInputEvents(inputElem, elem, props);
     return elem;
   },
@@ -3224,7 +3204,7 @@ export default {
       value = utils.getVarByPath(dataDay, props.varName);
     }
     let elem = dom.createElementFromHTML(`
-          <div class="input-section" input-key="${props.key || ""}">
+          <div class="input-section ${props.isHidden ? 'hide':''} " input-key="${props.key || ""}">
             <span class="text-subtitle d-block">
               ${props.label}
             </span>
@@ -3232,12 +3212,10 @@ export default {
           </div>`);
     let inputElem = elem.querySelector("input");
-    this.addKeyDownInputEvents(inputElem);
+    this.addKeyDownInputEvents(inputElem, elem, props);
     return elem;
   },
   createDataList(props, dataDay) {
     let list = [];
     if (dataDay && dataDay.values) {
@@ -3251,16 +3229,16 @@ export default {
                           </button>
                         </div>`;
-    let editBtn =  "";
+    let editBtn = "";
-    if(props.editButton){
-      editBtn =  `<button class="cap-btn-outline cap-btn-sm edit-btn" input-key="${props.editButton.key}">
+    if (props.editButton) {
+      editBtn = `<button class="cap-btn-outline cap-btn-sm edit-btn" input-key="${props.editButton.key}">
                     ${props.editButton.label}
-                  </button> `
+                  </button> `;
     }
     let str = `
-      <div class="input-section" input-key="${props.key || ""}">
+      <div class="input-section ${props.isHidden ? 'hide':''} " input-key="${props.key || ""}">
         <div class="input-section-title">
             <span class="text-subtitle d-block">
                 ${props.label}
@@ -3272,63 +3250,66 @@ export default {
         </div>
       </div> `;
     let $el = dom.createElementFromHTML(str);
     let $searchInput = $el.querySelector(".search-input");
     let $searchInputClear = $el.querySelector(".search-input-clear");
     let $inputBox = $el.querySelector(".input-box");
     list.map((item, j) => {
-        let label = utils.getVarByPath(item, props.varNameLabel) || dataDay.label || '__';
-        let $elItem = this.createDataListItem({
-          label,
-          subText: utils.getVarByPath(item, props.varNameSubText) || "",
-          id: "list-item-" + (dataDay.id || j),
-          key: "list-item-" + (dataDay.id || j),
-          tooltip: utils.getVarByPath(item, props.varNameTooltip) || label,
-          //colorIcon: "c-red",
-          link: utils.getVarByPath(item, props.varNameLink) || null,
-          suffix: utils.getVarByPath(item, props.varNameSuffix) || null,
-          value: utils.getVarByPath(item, props.varNameInput) || '',
-        });
-        $inputBox.appendChild($elItem);
-    })
+      let label =
+        utils.getVarByPath(item, props.varNameLabel) || dataDay.label || "__";
+      let $elItem = this.createDataListItem({
+        label,
+        valueText: utils.getVarByPath(item, props.varNameValueText) || "",
+        subText: utils.getVarByPath(item, props.varNameSubText) || "",
+        id: "list-item-" + (dataDay.id || j),
+        key: "list-item-" + (dataDay.id || j),
+        tooltip: utils.getVarByPath(item, props.varNameTooltip) || label,
+        //colorIcon: "c-red",
+        link: utils.getVarByPath(item, props.varNameLink) || null,
+        suffix: utils.getVarByPath(item, props.varNameSuffix) || null,
+        //value: JSON.stringify(utils.getVarByPath(item, props.varNameInput)) || {}
+      });
+      $inputBox.appendChild($elItem);
+    });
-    $searchInputClear.addEventListener("click", e => {
+    $searchInputClear.addEventListener("click", (e) => {
       $searchInput.value = "";
-      $searchInput.dispatchEvent(new Event('input', {bubbles:true}));
+      $searchInput.dispatchEvent(new Event("input", { bubbles: true }));
     });
-    $searchInput.addEventListener('keydown',e => {
-      if(e.key === "Escape"){
+    $searchInput.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
         $searchInput.value = "";
-        $searchInput.dispatchEvent(new Event('input', {bubbles:true}));
+        $searchInput.dispatchEvent(new Event("input", { bubbles: true }));
       }
-    });
+    });
-    $searchInput.addEventListener("input", e => {
+    $searchInput.addEventListener("input", (e) => {
       let $inputs = [];
       $inputs = $el.querySelectorAll(".mini-input-section") || [];
-      $inputs.forEach($i => {
+      $inputs.forEach(($i) => {
         let label = $i.getAttribute("label");
         let search = $searchInput.value;
-        if(label.toLowerCase().includes(search.toLowerCase())){
+        if (label.toLowerCase().includes(search.toLowerCase())) {
           $i.classList.remove("hide");
-        }else{
+        } else {
           $i.classList.add("hide");
         }
       });
     });
     let button = $el.querySelector("button.edit-btn");
-    if(button && props.editButton && props.editButton.onClick){
-      button.addEventListener("click", (e) => props.editButton.onClick({
-        event:e,
-        props,
-        dataDay,
-        $element: $el
-      }));
+    if (button && props.editButton && props.editButton.onClick) {
+      button.addEventListener("click", (e) =>
+        props.editButton.onClick({
+          event: e,
+          props,
+          dataDay,
+          $element: $el
+        })
+      );
     }
     return $el;
@@ -3336,6 +3317,7 @@ export default {
   createDataListItem({
     label = "",
+    valueText = "",
     subText = "",
     id = "",
     key = "",
@@ -3343,37 +3325,38 @@ export default {
     colorIcon = "",
     link = null,
     suffix = null,
-    value = "",
-  }){
-          let tooltipStr = "";
-          let iconStr = null;
-          let linkStr = "";
-          let str = "";
+    value = ""
+  }) {
+    let tooltipStr = "";
+    let iconStr = null;
+    let linkStr = "";
+    let str = "";
-          if (tooltip) {
-            tooltipStr = `
+    if (tooltip) {
+      tooltipStr = `
                   <div class="mini-input-section--tooltip">
                     ${tooltip}
                   </div>`;
-          }
+    }
-          if (colorIcon) {
-            if (utils.isHexColor(itemFormated.colorIcon)) {
-              iconStr = `<div class="mini-input-section--icon" style="background:${colorIcon}"> </div>`;
-            } else {
-              iconStr = `<div class="mini-input-section--icon ${colorIcon}"> </div>`;
-            }
-          }
+    if (colorIcon) {
+      if (utils.isHexColor(itemFormated.colorIcon)) {
+        iconStr = `<div class="mini-input-section--icon" style="background:${colorIcon}"> </div>`;
+      } else {
+        iconStr = `<div class="mini-input-section--icon ${colorIcon}"> </div>`;
+      }
+    }
-          if(link){
-            linkStr = `<a class="mini-input-section--link" target="_blank" href="${link}">${icons.linkIcon}</a> `
-          }
+    if (link) {
+      linkStr = `<a class="mini-input-section--link" target="_blank" href="${link}">${icons.linkIcon}</a> `;
+    }
-          str += `
-            <div class="mini-input-section ${iconStr ? 'has-icon' : ''} " label="${label}" data-id="${id}" data-key="${key}">
+    str += `
+            <div class="mini-input-section ${
+              iconStr ? "has-icon" : ""
+            } " label="${label}" data-id="${id}" data-key="${key}" data-value="${value || ''}">
               <label>
-                ${iconStr || ''}
+                ${iconStr || ""}
                 <div class="mini-input-section--titles">
                   <div class="mini-input-section--title truncate">
@@ -3385,10 +3368,10 @@ export default {
                 </div>
                 <div class="mini-input-section--content" >
-                  ${value}
+                  ${valueText}
                 </div>
                 <div class="mini-input-section--suffix" >
-                  ${suffix }
+                  ${suffix}
                 </div>
                 ${linkStr}
@@ -3396,17 +3379,10 @@ export default {
               </label>
               ${tooltipStr}
             </div>`;
-            return dom.createElementFromHTML(str);
+    return dom.createElementFromHTML(str);
   },
   createList(props, dataDay) {
-    let value = [];
-    if (dataDay && dataDay.values) {
-      value = utils.getVarByPath(dataDay, props.varName);
-    }
     let tabsContainer = "";
     if (props.tabs) {
@@ -3425,7 +3401,6 @@ export default {
       `;
     }
     let searchInput = `
       <div class="search-input-container">
         <input id="" type="text" name="" class="search-input" placeholder="buscar">
@@ -3435,10 +3410,8 @@ export default {
       </div>
     `;
     let str = `
-      <div class="input-section" input-key="${props.key || ""}">
+      <div class="input-section ${props.isHidden ? 'hide':''} " input-key="${props.key || ""}">
            <span class="text-subtitle d-block">
               ${props.label}
             </span>
@@ -3452,8 +3425,7 @@ export default {
     //TODO obtener input segun fila
     if (props.inputs) {
       props.inputs.forEach((i) => {
-        if(i.isTitle){
+        if (i.isTitle) {
           let tooltip = "";
           let icon = null;
@@ -3473,24 +3445,19 @@ export default {
             }
           }
-        str += `
-            <div class="mini-input-section is-title  ${icon ? 'has-icon' : ''}" input-tab-key="${i.tabKey || ""}" label="${i.label}">
+          str += `
+            <div class="mini-input-section is-title  ${
+              icon ? "has-icon" : ""
+            }" input-tab-key="${i.tabKey || ""}" label="${i.label}">
               <label>
-                ${icon || ''}
+                ${icon || ""}
                 <div class="mini-input-section--title truncate">
                   ${i.label}
                 </div>
               </label>
               ${tooltip}
             </div>`;
-        }else{
-          let value_found = value ? value.find((val) => val.id == i.id) : null;
-          let v = value_found || "";
-          let inputValue =props.varNameInput && v[props.varNameInput ] ? v[props.varNameInput ] : v.value;
+        } else {
           let tooltip = "";
           let icon = null;
           let link = "";
@@ -3510,14 +3477,16 @@ export default {
             }
           }
-          if(i.link){
+          if (i.link) {
             link = `<a class="mini-input-section--link" target="_blank" href="${i.link}">
                 ${icons.linkIcon}
-                </a> `
+                </a> `;
           }
           str += `
-            <div class="mini-input-section  ${icon ? 'has-icon' : ''}" input-tab-key="${i.tabKey || ""}" label="${i.label}">
+            <div class="mini-input-section  ${
+              icon ? "has-icon" : ""
+            }" input-tab-key="${i.tabKey || ""}" label="${i.label}">
               <label>
                 ${icon}
@@ -3534,8 +3503,8 @@ export default {
               </label>
               <div class="mini-input-section--footer">
-                <span class="start"> test </span>
-                <span class="end"> test end </span>
+                <span class="start"> start</span>
+                <span class="end"> end </span>
               </div>
               ${tooltip}
             </div>`;
@@ -3556,40 +3525,44 @@ export default {
       t.addEventListener("click", (e) => {
         this.selectInputBoxTab(t, $el);
         $searchInput.value = "";
-        $searchInput.dispatchEvent(new Event('input', {bubbles:true}));
+        $searchInput.dispatchEvent(new Event("input", { bubbles: true }));
       });
     });
-    if($searchInputClear){
-      $searchInputClear.addEventListener("click", e => {
+    if ($searchInputClear) {
+      $searchInputClear.addEventListener("click", (e) => {
         $searchInput.value = "";
-        $searchInput.dispatchEvent(new Event('input', {bubbles:true}));
+        $searchInput.dispatchEvent(new Event("input", { bubbles: true }));
       });
     }
-    if($searchInput){
-      $searchInput.addEventListener('keydown',e => {
-        if(e.key === "Escape"){
+    if ($searchInput) {
+      $searchInput.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
           $searchInput.value = "";
-          $searchInput.dispatchEvent(new Event('input', {bubbles:true}));
+          $searchInput.dispatchEvent(new Event("input", { bubbles: true }));
         }
-      });
+      });
-      $searchInput.addEventListener("input", e => {
-        let $tabSelected = $el.querySelector(".input-box-tab[tab-key].active") || null;
+      $searchInput.addEventListener("input", (e) => {
+        let $tabSelected =
+          $el.querySelector(".input-box-tab[tab-key].active") || null;
         let $inputs = [];
-        if($tabSelected){
+        if ($tabSelected) {
           let tabKey = $tabSelected.getAttribute("tab-key");
-          $inputs = $el.querySelectorAll(".mini-input-section[input-tab-key='"+tabKey+"']") || [];
-        }else{
+          $inputs =
+            $el.querySelectorAll(
+              ".mini-input-section[input-tab-key='" + tabKey + "']"
+            ) || [];
+        } else {
           $inputs = $el.querySelectorAll(".mini-input-section") || [];
         }
-        $inputs.forEach($i => {
+        $inputs.forEach(($i) => {
           let label = $i.getAttribute("label");
           let search = $searchInput.value;
-          if(label.toLowerCase().includes(search.toLowerCase())){
+          if (label.toLowerCase().includes(search.toLowerCase())) {
             $i.classList.remove("hide");
-          }else{
+          } else {
             $i.classList.add("hide");
           }
         });
@@ -3601,10 +3574,6 @@ export default {
     return $el;
   },
   /**
    * Crea InputBox, como elemento Dom
    * un InputBox es un contenedor con una lista de inputs
@@ -3637,8 +3606,7 @@ export default {
       `;
     }
-    let searchInput= `
+    let searchInput = `
       <div class="search-input-container">
         <input id="" type="text" name="" class="search-input" placeholder="buscar">
         <button class="search-input-clear">
@@ -3647,10 +3615,8 @@ export default {
       </div>
     `;
     let str = `
-      <div class="input-section" input-key="${props.key || ""}">
+      <div class="input-section ${props.isHidden ? 'hide':''} " input-key="${props.key || ""}">
            <span class="text-subtitle d-block">
               ${props.label}
             </span>
@@ -3664,8 +3630,7 @@ export default {
     if (props.inputs) {
       props.inputs.forEach((i) => {
-        if(i.isTitle){
+        if (i.isTitle) {
           let tooltip = "";
           let icon = "";
@@ -3685,9 +3650,10 @@ export default {
             }
           }
-        str += `
-            <div class="mini-input-section is-title" input-tab-key="${i.tabKey || ""}" label="${i.label}">
+          str += `
+            <div class="mini-input-section is-title" input-tab-key="${
+              i.tabKey || ""
+            }" label="${i.label}">
               <label>
                 ${icon}
                 <div class="mini-input-section--title truncate">
@@ -3696,13 +3662,13 @@ export default {
               </label>
               ${tooltip}
             </div>`;
-        }else{
+        } else {
           let value_found = value ? value.find((val) => val.id == i.id) : null;
           let v = value_found || "";
-          let inputValue =props.varNameInput && v[props.varNameInput ] ? v[props.varNameInput ] : v.value;
+          let inputValue =
+            props.varNameInput && v[props.varNameInput]
+              ? v[props.varNameInput]
+              : v.value;
           let tooltip = "";
           let icon = "";
           let link = "";
@@ -3722,14 +3688,16 @@ export default {
             }
           }
-          if(i.link){
+          if (i.link) {
             link = `<a class="mini-input-section--link" target="_blank" href="${i.link}">
                 ${icons.linkIcon}
-                </a> `
+                </a> `;
           }
           str += `
-            <div class="mini-input-section ${icon ? 'has-icon': ''}" input-tab-key="${i.tabKey || ""}" label="${i.label}">
+            <div class="mini-input-section ${
+              icon ? "has-icon" : ""
+            }" input-tab-key="${i.tabKey || ""}" label="${i.label}">
               <label>
                 <input type="number"
                       class="mini-input"
@@ -3737,7 +3705,7 @@ export default {
                       input-key="${i.key || i.label}"
                       value="${inputValue || ""}">
-                ${icon || ''}
+                ${icon || ""}
                 <div class="mini-input-section--title truncate">
                   ${i.label}
@@ -3770,40 +3738,44 @@ export default {
       t.addEventListener("click", (e) => {
         this.selectInputBoxTab(t, $el);
         $searchInput.value = "";
-        $searchInput.dispatchEvent(new Event('input', {bubbles:true}));
+        $searchInput.dispatchEvent(new Event("input", { bubbles: true }));
       });
     });
-    if($searchInputClear){
-      $searchInputClear.addEventListener("click", e => {
+    if ($searchInputClear) {
+      $searchInputClear.addEventListener("click", (e) => {
         $searchInput.value = "";
-        $searchInput.dispatchEvent(new Event('input', {bubbles:true}));
+        $searchInput.dispatchEvent(new Event("input", { bubbles: true }));
       });
     }
-    if($searchInput){
-      $searchInput.addEventListener('keydown',e => {
-        if(e.key === "Escape"){
+    if ($searchInput) {
+      $searchInput.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
           $searchInput.value = "";
-          $searchInput.dispatchEvent(new Event('input', {bubbles:true}));
+          $searchInput.dispatchEvent(new Event("input", { bubbles: true }));
         }
-      });
+      });
-      $searchInput.addEventListener("input", e => {
-        let $tabSelected = $el.querySelector(".input-box-tab[tab-key].active") || null;
+      $searchInput.addEventListener("input", (e) => {
+        let $tabSelected =
+          $el.querySelector(".input-box-tab[tab-key].active") || null;
         let $inputs = [];
-        if($tabSelected){
+        if ($tabSelected) {
           let tabKey = $tabSelected.getAttribute("tab-key");
-          $inputs = $el.querySelectorAll(".mini-input-section[input-tab-key='"+tabKey+"']") || [];
-        }else{
+          $inputs =
+            $el.querySelectorAll(
+              ".mini-input-section[input-tab-key='" + tabKey + "']"
+            ) || [];
+        } else {
           $inputs = $el.querySelectorAll(".mini-input-section") || [];
         }
-        $inputs.forEach($i => {
+        $inputs.forEach(($i) => {
           let label = $i.getAttribute("label");
           let search = $searchInput.value;
-          if(label.toLowerCase().includes(search.toLowerCase())){
+          if (label.toLowerCase().includes(search.toLowerCase())) {
             $i.classList.remove("hide");
-          }else{
+          } else {
             $i.classList.add("hide");
           }
         });
@@ -3812,7 +3784,7 @@ export default {
     this.selectInputBoxTab(_.first($tabs), $el);
-    $inputs.forEach((i) => this.addKeyDownInputEvents(i));
+    $inputs.forEach((i) => this.addKeyDownInputEvents(i, $el, props));
     return $el;
   },
@@ -3852,11 +3824,11 @@ export default {
       value = utils.getVarByPath(dataDay, props.varName);
     }
     let r = dom.createElementFromHTML(`
-      <div class="input-section" input-key="${props.key || ""}">
+      <div class="input-section ${props.isHidden ? 'hide':''} " input-key="${props.key || ""}">
         <label>
           <input type="checkbox" name="${props.key || ""}" input-key="${
-      props.key || ""
-    }" ${value ? "checked" : ""}>
+            props.key || ""
+          }" ${value ? "checked" : ""}>
           ${props.label}
         </label>
       </div>`);
@@ -3864,41 +3836,88 @@ export default {
     return r;
   },
+  createInputButtonsGroup(props) {
+    let $container = dom.createElementFromHTML(`
+      <div class="input-section ${props.isHidden ? 'hide':''} " input-key="${props.key || ""}">
+        <div class="buttons-group"> </div>
+      </div>`);
+    let $containerButtonGroup = $container.querySelector(".buttons-group");
+    let $buttons = [];
+    $buttons = props.buttons.map((buttonProp) => {
+      let buttonStr = `
+        <button
+          name="${buttonProp.key || ""}"
+          input-key="${buttonProp.key || ""}"
+          class="cap-btn-outline cap-btn-sm ${buttonProp.isSelected ? 'selected' : ''} ">
+          ${buttonProp.label}
+        </button>`;
+      let $button = domUtils.createElementFromHTML(buttonStr);
+      $containerButtonGroup.append($button);
+      $button.addEventListener("click", (e) => {
+        if (props.isSelectable) {
+          $buttons.forEach(($b) => $b.classList.remove("selected"));
+          $button.classList.add("selected");
+        }
+        buttonProp.onClick({ props, event: e, buttonsElements: $buttons });
+      });
+      return $button;
+    });
+    return $container;
+  },
   createInputButton(props) {
     let r = dom.createElementFromHTML(`
-      <div class="input-section" input-key="${props.key || ""}">
-          <button name="${props.key || ""}" input-key="${ props.key || "" }"  class="cap-btn-outline">
+      <div class="input-section ${props.isHidden ? 'hide':''} " input-key="${props.key || ""}">
+          <button
+            name="${props.key || ""}"
+            input-key="${props.key || ""}"
+            class="cap-btn-outline">
             ${props.label}
           </button>
       </div>`);
     let button = r.querySelector("button");
-    button.addEventListener("click", e => props.onClick({props, event:e}))
+    button.addEventListener("click", (e) => props.onClick({ props, event: e }));
     return r;
   },
-  addKeyDownInputEvents(input) {
-    input.addEventListener("keydown", function (event) {
+  addKeyDownInputEvents($input, $inputContainer, props) {
+    $input.addEventListener("keydown", function (event) {
       if (event.keyCode === 13) {
         //ENTER
-        input.dispatchEvent(
+        $input.dispatchEvent(
           new CustomEvent("saveMultiInput", {
             bubbles: true,
-            cancelable: false,
+            cancelable: false
           })
         );
       }
       if (event.keyCode === 27) {
         //ESC
-        input.dispatchEvent(
+        $input.dispatchEvent(
           new CustomEvent("cancelMultiInput", {
             bubbles: true,
-            cancelable: false,
+            cancelable: false
           })
         );
       }
     });
+    $input.addEventListener("input", (e) => {
+      if(props.onInput){
+        props.onInput({
+          event:e,
+          value: e.srcElement.value,
+          props,
+          $element: $inputContainer
+        });
+      }
+    });
   },
   createContextMenu({
@@ -3911,7 +3930,7 @@ export default {
     tabSelected = null,
     left = null,
     top = null,
-    name = "",
+    name = ""
   }) {
     if (config.timeline.contextMenu === undefined)
       return { elem: null, isVisible: false };
@@ -3925,7 +3944,7 @@ export default {
     let boundRectCapibara = null;
     let gap = 15; //px
-    if($capibaraElem){
+    if ($capibaraElem) {
       boundRectCapibara = $capibaraElem.getBoundingClientRect();
     }
@@ -3942,34 +3961,31 @@ export default {
       topPosition = top;
     }
     if ((leftPosition !== null) & (topPosition !== null)) {
-      if(boundRectCapibara){
+      if (boundRectCapibara) {
         let transformStyle = "";
-        if(topPosition > boundRectCapibara.height*2/6 && topPosition <= boundRectCapibara.height*4/6){
-          transformStyle+= `translateY(-50%)`;
+        if (
+          topPosition > (boundRectCapibara.height * 2) / 6 &&
+          topPosition <= (boundRectCapibara.height * 4) / 6
+        ) {
+          transformStyle += `translateY(-50%)`;
         }
-        if(topPosition > boundRectCapibara.height*4/6){
-          transformStyle+= `translateY(-100%)`;
+        if (topPosition > (boundRectCapibara.height * 4) / 6) {
+          transformStyle += `translateY(-100%)`;
         }
-        if(leftPosition> boundRectCapibara.width*4/6){
-          transformStyle+= `translateX(-100%)`;
+        if (leftPosition > (boundRectCapibara.width * 4) / 6) {
+          transformStyle += `translateX(-100%)`;
           leftPosition -= gap;
-        }else{
+        } else {
           leftPosition += gap;
         }
-        if(transformStyle !=""){
-            style += ` transform: ${transformStyle};`;
+        if (transformStyle != "") {
+          style += ` transform: ${transformStyle};`;
         }
       }
       style += `top: ${topPosition}px; left: ${leftPosition}px;`;
     } else {
       className += "cm-hide";
       isVisible = false;
@@ -3984,7 +4000,6 @@ export default {
     let $contextMenu = $contextMenuContainer.querySelector(".cap-context-menu");
     config.timeline.contextMenu.options.forEach((option) => {
       if (option.showIf) {
         let show = option.showIf({ item, date, selected, name, tabSelected });
         if (!show) return;
@@ -3998,7 +4013,7 @@ export default {
           date,
           selected,
           name,
-          tabSelected,
+          tabSelected
         });
       }
@@ -4015,11 +4030,10 @@ export default {
         optionClassName += "is-divider ";
       }
-      if(option.label){
+      if (option.label) {
         label = `<span>${option.label}</span>`;
       }
       if (option.icon) {
         strIcon = `<div class="cap-context-menu_item_icon">
                       <svg viewBox="0 0 24 24">
@@ -4044,7 +4058,7 @@ export default {
             date,
             item,
             selected,
-            tabSelected,
+            tabSelected
           })
         );
       } else {
@@ -4059,7 +4073,7 @@ export default {
     return {
       elem: $contextMenuContainer,
-      isVisible,
+      isVisible
     };
-  },
+  }
 };