capibara 1.3.51 → 1.3.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "capibara",
-  "version": "1.3.51",
+  "version": "1.3.53",
   "main": "dist/index.js",
   "repository": {
     "type": "git",

package/src/lib/capibara.js

@@ -39,6 +39,7 @@ export class Capibara{
     this.selected                 = [];
     this.config                   = config;
     this.lastDataDay              = null;
+    this.lastFocusedDay           = null;
     this.isShowNavExtended        = false;
     this.isShowNavInitial         = true;
     this.isShowNavButtons         = true;
@@ -72,6 +73,7 @@ export class Capibara{
     this.$saveCancelBtns      = [];
     this.selected             = [];
     this.lastDataDay          = null;
+    this.lastFocusedDay       = null;
     this.isMobile             = utils.checkIsMobile(this.config);
     this.isVisibleContextMenu = false;
     this.mobileSelectable     = this.config.timeline.mobileSelectable === true;
@@ -547,6 +549,7 @@ export class Capibara{
       this.mobileSelectable = false;
       this.config.timeline.mobileSelectable = false;
       this.setSelectable(false);
+      this.lastFocusedDay = null;
       this.updateMobileSelectButton();
       this.updateMobileFooterButtonsVisibility();
     }
@@ -870,9 +873,13 @@ export class Capibara{
         this.$elements.$detailDay.innerHTML = newDDContentString;
       }
       this.lastDataDay = dataByDate;
+      this.lastFocusedDay = item ? { date, item, pos } : null;
       this.focusOnFloatBox({pos, evt});
       return;
     }
+    if(this.isMobile && !this.mobileSelectable && item){
+      this.lastFocusedDay = { date, item, pos };
+    }
 
     if(!this.isSelectable({item, date, dataByDate})){
       this.$capibara.dispatchEvent(new CustomEvent("selectNoSelectable", {
@@ -1410,6 +1417,28 @@ export class Capibara{
     if(this.isMobile){
       this.setSelectable(this.mobileSelectable);
     }
+    if(this.mobileSelectable && this.lastFocusedDay){
+      const { date, item, pos } = this.lastFocusedDay;
+      const dataByDate = item && item.data ? _.find(item.data, { date }) : null;
+      if(this.isSelectable({ item, date, dataByDate })){
+        this.toggleSelect(date, item, pos);
+        this.redrawSelection();
+        this.updateMobileFooterButtonsVisibility();
+        this.$capibara.dispatchEvent(new CustomEvent("selectDay", {
+          bubbles: true,
+          cancelable: false,
+          detail: {
+            config: this.config,
+            lastSelection: { date, item, pos },
+            selected: this.selected,
+            tabSelected: this.tabSelected
+          }
+        }));
+      }
+      this.lastFocusedDay = null;
+    } else if(!this.mobileSelectable){
+      this.lastFocusedDay = null;
+    }
     this.updateMobileSelectButton();
     this.checkClassSidebarExtendedRight();
     this.updateMobileFooterVisibility();
@@ -1427,10 +1456,9 @@ export class Capibara{
     const label = active ? "Desactivar selección" : "Activar selección de días";
     const labelStyle = active ? "display:none" : "";
     const countStyle = active ? "" : "display:none";
-    const countText = this.selected.length + " d";
     $btn.innerHTML = this.getCheckboxIconHtml(active)
       + '<span class="mobile-footer-select-label" style="' + labelStyle + '">Seleccionar días</span>'
-      + '<span class="mobile-footer-select-count" style="' + countStyle + '">' + countText + "</span>";
+      + '<span class="mobile-footer-select-count" style="' + countStyle + '"></span>';
     $btn.classList.toggle("active", active);
     $btn.setAttribute("aria-checked", active);
     $btn.setAttribute("aria-label", label);
@@ -1444,7 +1472,7 @@ export class Capibara{
     const selectMode = this.mobileSelectable;
     const hasSelected = this.selected.length > 0;
     const $count = $footer.querySelector(".mobile-footer-select-count");
-    if($count) $count.textContent = this.selected.length + " d";
+    if($count) $count.textContent = this.selected.length + " días";
     $footer.querySelectorAll("[data-show-when]").forEach(($el) => {
       const showWhen = $el.getAttribute("data-show-when");
       let visible = showWhen === "always" ||
@@ -1604,6 +1632,7 @@ export class Capibara{
     if(options.detailDay){
       this.hideDetailDay();
       this.lastDataDay = null;
+      this.lastFocusedDay = null;
     }
 
     if(options.navLeft){

package/src/scss/abstracts/_animations.scss

@@ -42,4 +42,29 @@
       transform: translateX(200%);
     }
   }
+
+  @keyframes pulseSelectedDay {
+    0%,
+    100% {
+      border-color: var(--selected-day-pulse-color, rgba(255, 255, 255, 0.5));
+      box-shadow:
+        0 0 0 2px var(--selected-day-pulse-color, rgba(255, 255, 255, 0.4)),
+        inset 0px 0px 5px var(--selected-day-pulse-inset, rgba(189, 189, 189, 0.8));
+    }
+    25%,
+    75% {
+      border-color: var(--selected-day-pulse-color-mid, rgba(255, 255, 255, 0.7));
+      box-shadow:
+        0 0 0 2px var(--selected-day-pulse-color-mid, rgba(255, 255, 255, 0.65)),
+        0 0 6px var(--selected-day-pulse-glow-mid, rgba(255, 255, 255, 0.25)),
+        inset 0px 0px 5px var(--selected-day-pulse-inset, rgba(189, 189, 189, 0.8));
+    }
+    50% {
+      border-color: var(--selected-day-pulse-color-strong, rgba(255, 255, 255, 0.95));
+      box-shadow:
+        0 0 0 2px var(--selected-day-pulse-color-strong, rgba(255, 255, 255, 0.9)),
+        0 0 12px var(--selected-day-pulse-glow, rgba(255, 255, 255, 0.5)),
+        inset 0px 0px 5px var(--selected-day-pulse-inset, rgba(189, 189, 189, 0.8));
+    }
+  }
 }

package/src/scss/base/_utils_mobile.scss

@@ -1,58 +1,49 @@
-.capibara {
-  // Forzar modo mobile (ej. tablets): ignora breakpoint
-  &.force-mobile {
-    .c-d-desktop-none,
-    .c-d-desktop-flex,
-    .c-d-desktop-block,
-    .c-d-desktop-inline-block {
-      display: none !important;
-    }
-    .c-d-mobile-flex {
-      display: flex !important;
-    }
-    .c-d-mobile-block {
-      display: block !important;
-    }
-    .c-d-mobile-inline-block {
-      display: inline-block !important;
-    }
+@mixin mobile-breakpoint-styles {
+  .c-d-mobile-none {
+    display: none !important;
   }
+  .c-d-mobile-flex {
+    display: flex !important;
+  }
+  .c-d-mobile-block {
+    display: block !important;
+  }
+  .c-d-mobile-inline-block {
+    display: inline-block !important;
+  }
+}
 
-  //desktop
+.capibara {
+  // Desktop: solo cuando viewport >= 960px y NO force-mobile
   @media screen and (min-width: 960px) {
-    .c-d-desktop-none {
-      display: none !important;
-    }
-
-    .c-d-desktop-inline-block {
-      display: inline-block !important;
-    }
-
-    .c-d-desktop-block {
-      display: block !important;
-    }
-
-    .c-d-desktop-flex {
-      display: flex !important;
+    &:not(.force-mobile) {
+      .c-d-desktop-none {
+        display: none !important;
+      }
+      .c-d-desktop-inline-block {
+        display: inline-block !important;
+      }
+      .c-d-desktop-block {
+        display: block !important;
+      }
+      .c-d-desktop-flex {
+        display: flex !important;
+      }
     }
   }
 
-  //mobile
+  // Mobile: cuando viewport < 960px
   @media screen and (max-width: 959px) {
-    .c-d-mobile-none {
-      display: none !important;
-    }
-
-    .c-d-mobile-block {
-      display: block !important;
-    }
+    @include mobile-breakpoint-styles;
+  }
 
-    .c-d-mobile-inline-block {
-      display: inline-block !important;
-    }
+  // Force-mobile: mismos estilos que mobile, sin media query (ej. tablets)
+  &.force-mobile {
+    @include mobile-breakpoint-styles;
 
-    .c-d-mobile-flex {
-      display: flex !important;
+    // Tabs: ocultar botones (headerTop .tabs-container tiene display:flex)
+    .header-top .tabs-container {
+      display: none !important;
     }
   }
 }

package/src/scss/components/_select.scss

@@ -1,4 +1,24 @@
 .capibara {
+  .tab-select-container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+
+    &::after {
+      content: "";
+      position: absolute;
+      right: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 6px solid white;
+    }
+  }
+
   select.tabs-select {
     margin: 6px 18px;
     background: grey;
@@ -6,8 +26,7 @@
     font-size: 16px;
     outline: none;
     width: 100px;
-
-    padding: 3px 18px;
+    padding: 3px 28px 3px 18px;
     font-weight: bold;
     border: 1px solid transparent;
     margin: 8px;
@@ -21,17 +40,6 @@
       padding: 15px;
     }
 
-    &:after {
-      content: "";
-      display: block;
-      position: absolute;
-      right: 10px;
-      top: 4px;
-      border-width: 4px;
-      border-color: white;
-      z-index: 2;
-    }
-
     &.disabled {
       color: grey;
     }

package/src/scss/layout/_mobileFooter.scss

@@ -8,7 +8,7 @@
     .container-tl {
       flex: 1;
       min-height: 0;
-      margin-bottom: calc( var(--mobile-footer-height) - 10px);
+      margin-bottom: var(--mobile-footer-height);
     }
   }
 
@@ -41,13 +41,20 @@
       margin-left: auto;
     }
 
+    @media (min-width: 768px) {
+      .mobile-footer-buttons {
+        margin-left: 0;
+      }
+    }
+
     .mobile-footer-select-toggle {
       display: inline-flex;
       align-items: center;
       gap: 0.5em;
       width: auto;
       min-width: auto;
-      padding: 4px 8px;
+      padding: 8px 8px;
+      margin: 0;
       border-radius: 4px;
       margin-right: 0;
       background: rgba(255, 255, 255, 0.35);

package/src/scss/layout/_nav.scss

@@ -353,6 +353,13 @@
               flex: 1 1 auto;
             }
 
+            // clickLabelToDetail en mobile: nombre con underline (botón oculto)
+            &.click-label-to-detail .item-title-content {
+              @media screen and (max-width: 959px) {
+                text-decoration: underline !important;
+              }
+            }
+
             .detail-btn-container {
               flex: 0 0 auto;
               width: auto;
@@ -374,12 +381,37 @@
               &:hover {
                 background: rgba(100, 100, 100, 0.2) !important;
               }
+              &.detail-btn-icon {
+                margin-left: 0.5rem;
+                padding: 2px 6px;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                .info-outline-icon,
+                .close-icon {
+                  display: inline-flex;
+                  svg {
+                    width: 18px;
+                    height: 18px;
+                  }
+                }
+              }
             }
           }
         }
       }
     }
+  }
+
+  &.force-mobile {
+    nav .nav-item-list .nav-item .nav-item-container .item-title {
+      &.click-label-to-detail .item-title-content {
+        text-decoration: underline;
+      }
+    }
+  }
 
+  nav {
     .multibuttons-btn {
       background: transparent;
       border: none;

package/src/scss/layout/_selectContainer.scss

@@ -8,11 +8,20 @@
     height: 0px;
 
     .selected-day {
+      --selected-day-pulse-color: rgba(200, 85, 57, 0.6);
+      --selected-day-pulse-color-mid: rgba(200, 85, 57, 0.75);
+      --selected-day-pulse-color-strong: rgba(200, 85, 57, 0.9);
+      --selected-day-pulse-glow: rgba(200, 85, 57, 0.35);
+      --selected-day-pulse-glow-mid: rgba(200, 85, 57, 0.18);
+      --selected-day-pulse-inset: rgba(189, 189, 189, 0.8);
       width: var(--day-width);
       height: var(--item-height);
       position: absolute;
       background: rgba(189, 189, 189, 0.4);
-      box-shadow: inset 0px 0px 5px rgba(189, 189, 189, 0.8);
+      box-shadow: inset 0px 0px 5px var(--selected-day-pulse-inset);
+      border: 2px solid var(--selected-day-pulse-color);
+      animation: pulseSelectedDay 1s ease-in-out infinite;
+
       &[cap-badge] {
         &::after {
           content: attr(cap-badge);
@@ -35,4 +44,15 @@
       }
     }
   }
+
+  &.dark-theme {
+    .selected-day {
+      --selected-day-pulse-color: rgba(0, 255, 34, 0.5);
+      --selected-day-pulse-color-mid: rgba(0, 255, 34, 0.75);
+      --selected-day-pulse-glow-mid: rgba(0, 255, 34, 0.18);
+      --selected-day-pulse-color-strong: rgba(0, 255, 34, 0.95);
+      --selected-day-pulse-glow: rgba(0, 255, 34, 0.5);
+      --selected-day-pulse-inset: rgba(189, 189, 189, 0.8);
+    }
+  }
 }

package/src/util/icons.js

@@ -84,6 +84,13 @@ const alert = `<span class="alert-icon">
                     </svg>
                 </span>`;
 
+// Info / open detail (para botón detail en mobile)
+const infoOutline = `<span class="info-outline-icon">
+                    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+                        <path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" />
+                    </svg>
+                </span>`;
+
 // Material Design: checkbox-marked (activado)
 const checkboxChecked = `<span class="checkbox-checked-icon">
                     <svg style="width:24px;height:24px" viewBox="0 0 24 24">
@@ -108,6 +115,7 @@ function getCheckboxIcon(checked) {
 export default {
     closeIcon,
     linkIcon,
+    infoOutline,
     toggleLegends,
     chevronDown,
     chevronRight,

package/src/util/tableElements.js

@@ -25,6 +25,9 @@ export default {
     if (config.timeline.header.extend.isShow) {
       e.classList.add("header-extended");
     }
+    if (config.timeline && config.timeline.forceMobile === true) {
+      e.classList.add("force-mobile");
+    }
     return e;
   },
 
@@ -401,7 +404,14 @@ export default {
       }
 
       if (showTabs) {
-        str += ` <div class="tab-select-container c-d-desktop-none c-d-mobile-flex">
+        const forceMobile = config.timeline && config.timeline.forceMobile === true;
+        const tabSelectClasses = forceMobile
+          ? "tab-select-container c-d-mobile-flex"
+          : "tab-select-container c-d-desktop-none c-d-mobile-flex";
+        const tabsContainerClasses = forceMobile
+          ? "tabs-container c-d-mobile-none"
+          : "tabs-container c-d-desktop-flex c-d-mobile-none";
+        str += ` <div class="${tabSelectClasses}">
                   <select class="tabs-select" >`;
 
         config.timeline.tabs.forEach((tab) => {
@@ -414,7 +424,7 @@ export default {
 
         str += `</select> </div>`;
 
-        str += ` <div class="tabs-container c-d-desktop-flex c-d-mobile-none">`;
+        str += ` <div class="${tabsContainerClasses}">`;
 
         config.timeline.tabs.forEach((tab) => {
           if (!tab.isHidden) {
@@ -1011,11 +1021,22 @@ export default {
       if (d.isHidden) return;
 
       const hasBtn = !!d.onClickDetailButton;
-      const detailBtn = hasBtn
-        ? `<button class="detail-btn" item-id="${d.id || -1}" type-node="${
+      const isMobile = utils.checkIsMobile(config);
+      const hasClickLabelToDetail =
+        !!d.onClickDetailButton && !!d.clickLabelToDetail;
+      // en mobile con clickLabelToDetail: no mostrar botón, el nombre es clickeable
+      const showDetailBtn = hasBtn && !(isMobile && hasClickLabelToDetail);
+      const detailBtnContent =
+        showDetailBtn && isMobile
+          ? (d.iconDetailButton || icons.infoOutline)
+          : showDetailBtn
+            ? (d.labelDetailButton || "")
+            : "";
+      const detailBtn = showDetailBtn
+        ? `<button class="detail-btn ${isMobile ? "detail-btn-icon" : ""}" item-id="${d.id || -1}" type-node="${
             d.type || ""
-          }" >
-        ${d.labelDetailButton}
+          }" ${isMobile && d.labelDetailButton ? `title="${d.labelDetailButton.replace(/"/g, "&quot;")}"` : ""}>
+        ${detailBtnContent}
                        </button>`
         : "";
 
@@ -1035,8 +1056,8 @@ export default {
 
       navList += `
           <div class="item-title truncate full-width ${
-            d.clickeable ? "clickeable" : ""
-          }
+            d.clickeable || hasClickLabelToDetail ? "clickeable" : ""
+          } ${hasClickLabelToDetail ? "click-label-to-detail" : ""}
                       ${d.navOver ? "hoverable" : ""} " item-id="${
                         d.id || -1
                       }" type-node="${d.type || ""}" >
@@ -1611,9 +1632,24 @@ export default {
 
     $elem.querySelectorAll(".item-title.clickeable").forEach((i) => {
       i.addEventListener("click", (e) => {
+        // si tiene clickLabelToDetail, ese handler se encarga (no disparar clickNavLeftItem)
+        if (i.classList.contains("click-label-to-detail")) return;
         let itemId = i.getAttribute("item-id");
         let typeNode = i.getAttribute("type-node");
         let value = i.value;
+        const $container = i.closest(".nav-item-container");
+        const isGroup = $container && $container.classList.contains("parent");
+        const isItem = i.closest(".child-nav-item") !== null;
+        const kind = isItem ? "item" : isGroup ? "group" : "unknown";
+        console.log("[Capibara nav] clickNavLeftItem", {
+          kind,
+          isGroup,
+          isItem,
+          itemId,
+          typeNode,
+          value: value != null ? value : "(no value)",
+          target: e.target ? e.target.className : undefined,
+        });
         i.dispatchEvent(
           new CustomEvent("clickNavLeftItem", {
             bubbles: true,
@@ -1622,6 +1658,9 @@ export default {
               itemId: itemId,
               type: typeNode,
               value: value,
+              isGroup,
+              isItem,
+              kind,
             },
           })
         );
@@ -1702,6 +1741,7 @@ export default {
 
     $elem.querySelectorAll("button.detail-btn").forEach((i) => {
       i.addEventListener("click", (e) => {
+        e.stopPropagation(); // evitar que también dispare el click de item-title
         let itemId = i.getAttribute("item-id");
         let typeNode = i.getAttribute("type-node");
         let item = utils.getItemById(config, itemId, "parent");
@@ -1718,6 +1758,26 @@ export default {
       });
     });
 
+    // click en nombre/label ejecuta onClickDetailButton cuando clickLabelToDetail
+    $elem.querySelectorAll(".item-title.click-label-to-detail").forEach((i) => {
+      i.addEventListener("click", (e) => {
+        if (e.target.closest(".detail-btn")) return; // el botón ya lo maneja
+        let itemId = i.getAttribute("item-id");
+        let typeNode = i.getAttribute("type-node");
+        let item = utils.getItemById(config, itemId, "parent");
+
+        if (item && item.onClickDetailButton) {
+          item.onClickDetailButton({
+            itemId: itemId,
+            type: typeNode,
+            item: item,
+            event: e,
+            button: null,
+          });
+        }
+      });
+    });
+
     $elem.querySelectorAll("button.tree-icon").forEach((i) => {
       i.addEventListener("click", (e) => {
         let itemId = i.getAttribute("item-id");
@@ -1977,8 +2037,10 @@ export default {
     const mobileSelectActive = config.timeline.mobileSelectable === true;
     const mobileSelectLabel = mobileSelectActive ? "Desactivar selección" : "Activar selección de días";
     const mobileSelectIcon = icons.getCheckboxIcon ? icons.getCheckboxIcon(mobileSelectActive) : (mobileSelectActive ? icons.checkboxChecked : icons.checkboxUnchecked);
+    const forceMobile = config.timeline && config.timeline.forceMobile === true;
+    const footerClasses = forceMobile ? "mobile-footer c-d-mobile-flex" : "mobile-footer c-d-mobile-flex c-d-desktop-none";
     let str = `
-      <div class="mobile-footer c-d-mobile-flex c-d-desktop-none">
+      <div class="${footerClasses}">
         <div class="mobile-footer-content">`;
     if (config.timeline.selectableDesktop !== false) {
       const countHidden = !mobileSelectActive;
@@ -1986,7 +2048,11 @@ export default {
           <button type="button" id="cap-btn-mobile-select" toggle-mobile-select
                   class="cap-btn-icon cap-btn-icon-raised mobile-footer-select-toggle ${mobileSelectActive ? "active" : ""}"
                   role="switch" aria-checked="${mobileSelectActive}" aria-label="${mobileSelectLabel}"
-                  cap-tooltip="${mobileSelectLabel}">${mobileSelectIcon}<span class="mobile-footer-select-label">Seleccionar días</span><span class="mobile-footer-select-count" ${countHidden ? 'style="display:none"' : ''}>0 d</span></button>`;
+                  cap-tooltip="${mobileSelectLabel}">${mobileSelectIcon}<span class="mobile-footer-select-label">
+                    Editar Días
+                  </span>
+                  <span class="mobile-footer-select-count" ${countHidden ? 'style="display:none"' : ''}>0 d</span>
+                  </button>`;
     }
     str += `
           <div class="mobile-footer-buttons">