underpost 2.85.7 → 2.89.0

package/src/client/components/core/AgGrid.js

@@ -11,7 +11,7 @@ const AgGrid = {
   grids: {},
   theme: `ag-theme-alpine`, // quartz
   Render: async function (options) {
-    let { id } = options;
+    let { id, paginationOptions } = options;
     setTimeout(() => {
       // Grid Options: Contains all of the grid configurations
       const gridOptions = {
@@ -34,6 +34,38 @@ const AgGrid = {
             return params.data && params.data._new;
           },
         },
+        // Cell rendering events
+        onFirstDataRendered: options?.onFirstDataRendered,
+        onViewportChanged: options?.onViewportChanged,
+        onModelUpdated: options?.onModelUpdated,
+        onVirtualRowRemoved: options?.onVirtualRowRemoved,
+        // Cell interaction events
+        onCellClicked: options?.onCellClicked,
+        onCellDoubleClicked: options?.onCellDoubleClicked,
+        onCellFocused: options?.onCellFocused,
+        onCellMouseOver: options?.onCellMouseOver,
+        onCellMouseOut: options?.onCellMouseOut,
+        onCellValueChanged: options?.onCellValueChanged,
+        // set background colour on every row, this is probably bad, should be using CSS classes
+        // rowStyle: { background: 'black' },
+
+        // set background colour on even rows again, this looks bad, should be using CSS classes
+        // getRowStyle: (params) => {
+        //   if (params.node.rowIndex % 2 === 0) {
+        //     return { background: 'red' };
+        //   }
+        // },
+
+        // all rows assigned CSS class 'my-green-class'
+        // rowClass: 'my-green-class',
+
+        // all even rows assigned 'my-shaded-effect'
+        // getRowClass: (params) => {
+        //   if (params.node.rowIndex % 2 === 0) {
+        //     return 'my-shaded-effect';
+        //   }
+        // },
+
         // domLayout: 'autoHeight', || 'normal'
         // Column Definitions: Defines & controls grid columns.
         columnDefs: options?.gridOptions?.rowData?.[0]
@@ -62,7 +94,9 @@ const AgGrid = {
       if (!options.style || !options.style.height) {
         if (options.parentModal && Modal.Data[options.parentModal].options.observer) {
           Modal.Data[options.parentModal].onObserverListener[id + '-observer'] = ({ width, height }) => {
-            if (s(`.${id}`)) s(`.${id}`).style.height = `${height - 180}px`;
+            if (s(`.${id}`))
+              s(`.${id}`).style.height =
+                `${height - 180 + (options.customHeightOffset ? options.customHeightOffset : 0)}px`;
             else delete Modal.Data[options.parentModal].onObserverListener[id + '-observer'];
           };
           s(`.${id}`).style.height = `${s(`.${options.parentModal}`).offsetHeight - 180}px`;
@@ -70,6 +104,9 @@ const AgGrid = {
       }
     });
     const usePagination = options?.usePagination;
+    const limitOptionsAttr = paginationOptions?.limitOptions
+      ? `limit-options='${JSON.stringify(paginationOptions.limitOptions)}'`
+      : '';
     return html`
       <div
         class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
@@ -77,7 +114,7 @@ const AgGrid = {
           ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
           : ''}"
       ></div>
-      ${usePagination ? `<ag-pagination id="ag-pagination-${id}"></ag-pagination>` : ''}
+      ${usePagination ? `<ag-pagination id="ag-pagination-${id}" ${limitOptionsAttr}></ag-pagination>` : ''}
     `;
   },
   RenderStyle: async function (
@@ -159,6 +196,7 @@ const AgGrid = {
           ${darkTheme
             ? html`
                 <style>
+                  .row-new-highlight,
                   .ag-row.row-new-highlight {
                     background-color: #6d68ff !important;
                     transition: background-color 1s ease-out;
@@ -172,6 +210,7 @@ const AgGrid = {
                 </style>
               `
             : html`<style>
+                .row-new-highlight,
                 .ag-row.row-new-highlight {
                   background-color: #d0eaf8 !important;
                   transition: background-color 1s ease-out;

package/src/client/components/core/CommonJs.js

@@ -947,6 +947,8 @@ const emotionsData = [
 const userRoleEnum = ['admin', 'moderator', 'user', 'guest'];
 const commonAdminGuard = (role) => userRoleEnum.indexOf(role) === userRoleEnum.indexOf('admin');
 const commonModeratorGuard = (role) => userRoleEnum.indexOf(role) <= userRoleEnum.indexOf('moderator');
+const commonUserGuard = (role) => userRoleEnum.indexOf(role) <= userRoleEnum.indexOf('user');
+const commonGuestGuard = (role) => userRoleEnum.indexOf(role) <= userRoleEnum.indexOf('guest');
 
 export {
   s4,
@@ -1003,6 +1005,8 @@ export {
   generateRandomPasswordSelection,
   commonAdminGuard,
   commonModeratorGuard,
+  commonUserGuard,
+  commonGuestGuard,
   isChileanIdentityDocument,
   getCurrentTrace,
   userRoleEnum,

package/src/client/components/core/Css.js

@@ -221,8 +221,11 @@ const borderChar = (px, color, selectors, hover = false) => {
         (selector) => html`
           <style>
             ${selector}${hover ? ':hover' : ''} {
-              text-shadow: ${px}px -${px}px ${px}px ${color}, -${px}px ${px}px ${px}px ${color},
-                -${px}px -${px}px ${px}px ${color}, ${px}px ${px}px ${px}px ${color};
+              text-shadow:
+                ${px}px -${px}px ${px}px ${color},
+                -${px}px ${px}px ${px}px ${color},
+                -${px}px -${px}px ${px}px ${color},
+                ${px}px ${px}px ${px}px ${color};
             }
           </style>
         `,
@@ -239,20 +242,28 @@ const boxShadow = ({ selector }) => html`
     ? html`
         <style>
           ${selector} {
-            box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.1), 0 6px 20px 0 rgba(255, 255, 255, 0.08);
+            box-shadow:
+              0 4px 8px 0 rgba(255, 255, 255, 0.1),
+              0 6px 20px 0 rgba(255, 255, 255, 0.08);
           }
           ${selector}:hover {
-            box-shadow: 0 8px 16px 0 rgba(255, 255, 255, 0.15), 0 10px 30px 0 rgba(255, 255, 255, 0.1);
+            box-shadow:
+              0 8px 16px 0 rgba(255, 255, 255, 0.15),
+              0 10px 30px 0 rgba(255, 255, 255, 0.1);
           }
         </style>
       `
     : html`
         <style>
           ${selector} {
-            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+            box-shadow:
+              0 4px 8px 0 rgba(0, 0, 0, 0.2),
+              0 6px 20px 0 rgba(0, 0, 0, 0.19);
           }
           ${selector}:hover {
-            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 10px 30px 0 rgba(0, 0, 0, 0.3);
+            box-shadow:
+              0 8px 16px 0 rgba(0, 0, 0, 0.2),
+              0 10px 30px 0 rgba(0, 0, 0, 0.3);
           }
         </style>
       `}
@@ -452,7 +463,9 @@ const typeWriter = async function ({ id, html, seconds, endHideBlink, container
           overflow: hidden;
           border-right: 0.15em solid orange;
           white-space: nowrap;
-          animation: typing-${id} ${typingAnimationTransitionStyle[1]}, blink-caret-${id} 0.5s step-end infinite;
+          animation:
+            typing-${id} ${typingAnimationTransitionStyle[1]},
+            blink-caret-${id} 0.5s step-end infinite;
           animation-fill-mode: forwards;
           width: 0;
         }
@@ -517,12 +530,20 @@ const dashRange = ({ selector, color }) => {
   return html`
     <style>
       .${selector} {
-        background: linear-gradient(90deg, ${color} 50%, transparent 50%),
-          linear-gradient(90deg, ${color} 50%, transparent 50%), linear-gradient(0deg, ${color} 50%, transparent 50%),
-          linear-gradient(0deg, ${color} 50%, transparent 50%);
+        background:
+          linear-gradient(90deg, ${color} 50%, transparent 50%), linear-gradient(90deg, ${color} 50%, transparent 50%),
+          linear-gradient(0deg, ${color} 50%, transparent 50%), linear-gradient(0deg, ${color} 50%, transparent 50%);
         background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
-        background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
-        background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0px;
+        background-size:
+          16px 4px,
+          16px 4px,
+          4px 16px,
+          4px 16px;
+        background-position:
+          0% 0%,
+          100% 100%,
+          0% 100%,
+          100% 0px;
         border-radius: 5px;
         padding: 10px;
         animation: ${selector}_dash_range 5s linear infinite;
@@ -530,7 +551,11 @@ const dashRange = ({ selector, color }) => {
 
       @keyframes ${selector}_dash_range {
         to {
-          background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100%;
+          background-position:
+            100% 0%,
+            0% 100%,
+            0% 0%,
+            100% 100%;
         }
       }
     </style>
@@ -660,8 +685,8 @@ const scrollBarLightRender = () => {
         ::-` +
         b +
         `-scrollbar {
-          width: 5px;      
-          height: 5px; 
+          width: 5px;
+          height: 5px;
         }
 
         /* Track */
@@ -690,6 +715,10 @@ const scrollBarLightRender = () => {
     .join('');
 };
 
+// adjustHex: supports #RGB #RGBA #RRGGBB #RRGGBBAA
+// preserves alpha channel if present (does not modify it)
+// usage: adjustHex('#24FBFFFF', 0.1)
+
 function adjustHex(hex, factor = 0.1, options = {}) {
   if (typeof hex !== 'string') throw new TypeError('hex must be a string');
   if (typeof factor !== 'number') throw new TypeError('factor must be a number');
@@ -701,27 +730,34 @@ function adjustHex(hex, factor = 0.1, options = {}) {
 
   const mode = options.mode === 'hsl' ? 'hsl' : 'mix';
 
-  // normalize hex
+  // normalize hex: accept 3,4,6,8 (with or without #)
   let h = hex.replace(/^#/, '').trim();
-  if (!(h.length === 3 || h.length === 6)) throw new Error('Invalid hex format');
-  if (h.length === 3)
+  if (![3, 4, 6, 8].includes(h.length)) {
+    throw new Error('Invalid hex format — expected 3, 4, 6 or 8 hex digits');
+  }
+
+  // expand shorthand (#RGB or #RGBA -> #RRGGBB or #RRGGBBAA)
+  if (h.length === 3 || h.length === 4) {
     h = h
       .split('')
       .map((c) => c + c)
       .join('');
+  }
+
+  const hasAlpha = h.length === 8;
 
   const r = parseInt(h.slice(0, 2), 16);
   const g = parseInt(h.slice(2, 4), 16);
   const b = parseInt(h.slice(4, 6), 16);
+  const a = hasAlpha ? parseInt(h.slice(6, 8), 16) : null; // keep alpha as-is if present
 
-  const clamp = (v, a = 0, z = 255) => Math.max(a, Math.min(z, v));
+  const clamp = (v, a0 = 0, z = 255) => Math.max(a0, Math.min(z, v));
 
-  const rgbToHex = (rr, gg, bb) =>
-    '#' +
-    [rr, gg, bb]
-      .map((v) => Math.round(v).toString(16).padStart(2, '0'))
-      .join('')
-      .toLowerCase();
+  const rgbToHex = (rr, gg, bb, aa = null) => {
+    const parts = [rr, gg, bb].map((v) => Math.round(v).toString(16).padStart(2, '0'));
+    if (aa !== null) parts.push(Math.round(aa).toString(16).padStart(2, '0'));
+    return '#' + parts.join('').toLowerCase();
+  };
 
   if (mode === 'mix') {
     // positive: mix toward white (255); negative: mix toward black (0)
@@ -729,11 +765,15 @@ function adjustHex(hex, factor = 0.1, options = {}) {
       if (factor >= 0) {
         return clamp(Math.round(c + (255 - c) * factor));
       } else {
-        const a = Math.abs(factor);
-        return clamp(Math.round(c * (1 - a)));
+        const aFactor = Math.abs(factor);
+        return clamp(Math.round(c * (1 - aFactor)));
       }
     };
-    return rgbToHex(mixChannel(r), mixChannel(g), mixChannel(b));
+
+    const rr = mixChannel(r);
+    const gg = mixChannel(g);
+    const bb = mixChannel(b);
+    return rgbToHex(rr, gg, bb, a);
   } else {
     // HSL mode: convert rgb to hsl, adjust L by factor, convert back
     const rgbToHsl = (r, g, b) => {
@@ -791,10 +831,16 @@ function adjustHex(hex, factor = 0.1, options = {}) {
     let newL = ll + factor;
     newL = Math.max(0, Math.min(1, newL));
     const { r: r2, g: g2, b: b2 } = hslToRgb(hh, ss, newL);
-    return rgbToHex(r2, g2, b2);
+    return rgbToHex(r2, g2, b2, a);
   }
 }
 
+// Examples (uncomment to test):
+// console.log(adjustHex('#24FBFFFF', 0.1)); // accepts 8-digit input
+// console.log(adjustHex('#24FBFF', 0.1));   // 6-digit
+// console.log(adjustHex('#4bf', -0.2));     // 3-digit
+// console.log(adjustHex('#4bf8', -0.2));    // 4-digit (with alpha)
+
 // Convenience helpers:
 function lightenHex(hex, percentOr01 = 0.1, options = {}) {
   return adjustHex(hex, Math.abs(percentOr01), options);
@@ -867,7 +913,7 @@ const scrollBarDarkRender = () => {
         b +
         `-scrollbar {
       width: 8px;
-      height: 8px; 
+      height: 8px;
       /* line-height: 1em; */
     }
 
@@ -1011,29 +1057,30 @@ const cssEffect = async (containerSelector, event) => {
   }, 600);
 };
 
-const imageShimmer = () => html`<div
-  class="abs center ssr-shimmer-search-box"
-  style="${renderCssAttr({
-    style: {
-      width: '95%',
-      height: '95%',
-      'border-radius': '10px',
-      overflow: 'hidden',
-    },
-  })}"
->
-  <div
-    class="abs center"
+const imageShimmer = () =>
+  html`<div
+    class="abs center ssr-shimmer-search-box"
     style="${renderCssAttr({
       style: {
-        'font-size': '70px',
-        color: `#bababa`,
+        width: '95%',
+        height: '95%',
+        'border-radius': '10px',
+        overflow: 'hidden',
       },
     })}"
   >
-    <i class="fa-solid fa-photo-film"></i>
-  </div>
-</div>`;
+    <div
+      class="abs center"
+      style="${renderCssAttr({
+        style: {
+          'font-size': '70px',
+          color: `#bababa`,
+        },
+      })}"
+    >
+      <i class="fa-solid fa-photo-film"></i>
+    </div>
+  </div>`;
 
 const renderChessPattern = (patternSize = 20) =>
   `background: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / ${patternSize}px ${patternSize}px`;

package/src/client/components/core/CssCore.js

@@ -230,7 +230,6 @@ const CssCommonCore = async () => {
       .menu-btn-icon {
         font-size: 20px;
         width: 40px;
-        overflow: hidden;
         text-align: center;
       }
     </style>

package/src/client/components/core/LoadingAnimation.js

@@ -57,7 +57,7 @@ const LoadingAnimation = {
   },
   spinner: {
     getId: (id) => `spinner-progress-${id.slice(1)}`,
-    play: async function (container, spinner) {
+    play: async function (container, spinner, options = { append: '', prepend: '' }) {
       if (!s(container)) return;
       const id = this.getId(container);
 
@@ -85,7 +85,7 @@ const LoadingAnimation = {
               style,
             })}"
           >
-            ${render}
+            ${options.prepend ? options.prepend : ''} ${render} ${options.append ? options.append : ''}
           </div>
         `,
       );

package/src/client/components/core/Logger.js

@@ -5,16 +5,9 @@ const loggerFactory = (meta, options = { trace: false }) => {
   const types = ['error', 'warn', 'info', 'debug'];
   const logger = {
     log: function (type, args) {
-      if (location.hostname !== 'localhost' && console.log() !== null) {
-        console.log = () => null;
-        console.error = () => null;
-        console.info = () => null;
-        console.warn = () => null;
-      }
+      if (!window.renderPayload.dev) return;
       if (options.trace === true) args.push(getCurrentTrace().split('Logger.js:23')[1]);
-      return location.hostname === 'localhost'
-        ? console[type](`[${meta}] ${new Date().toISOString()} ${type}:`, ...args)
-        : null;
+      return console[type](`[${meta}] ${new Date().toISOString()} ${type}:`, ...args);
     },
   };
   types.map(

package/src/client/components/core/Modal.js

@@ -465,6 +465,7 @@ const Modal = {
                   >
                     ${await Input.Render({
                       id: inputSearchBoxId,
+                      autocomplete: 'off',
                       placeholder: Modal.mobileModal() ? Translate.Render('search', '.top-bar-search-box') : undefined, // html`<i class="fa-solid fa-magnifying-glass"></i> ${Translate.Render('search')}`,
                       placeholderIcon: html`<div
                         class="in fll"
@@ -619,12 +620,12 @@ const Modal = {
                         result.fontAwesomeIcon
                           ? html`<i class="${result.fontAwesomeIcon.classList.toString()}"></i> `
                           : result.imgElement
-                          ? html`<img
-                              class="inl"
-                              src="${result.imgElement.src}"
-                              style="${renderCssAttr({ style: { width: '25px', height: '25px' } })}"
-                            />`
-                          : ''
+                            ? html`<img
+                                class="inl"
+                                src="${result.imgElement.src}"
+                                style="${renderCssAttr({ style: { width: '25px', height: '25px' } })}"
+                              />`
+                            : ''
                       } ${Translate.Render(result.routerId)}`,
                       class: `wfa search-result-btn-${result.routerId} ${
                         indexResult === currentKeyBoardSearchBoxIndex ? 'main-btn-menu-active' : ''
@@ -692,10 +693,12 @@ const Modal = {
                             });
                             const imgElement = getAllChildNodes(s(`.main-btn-${routerId}`)).find((e) => {
                               return (
-                                typeof e.src === 'string' &&
-                                e.src.match(routerId) &&
                                 e.classList &&
-                                Array.from(e.classList).find((e) => e.match('img-btn-square-menu'))
+                                Array.from(e.classList).find((e) =>
+                                  options.searchCustomImgClass
+                                    ? e.match(options.searchCustomImgClass)
+                                    : e.match('img-btn-square-menu'),
+                                )
                               );
                             });
                             if (imgElement || fontAwesomeIcon) {
@@ -1896,8 +1899,8 @@ const Modal = {
         const idSlide = this.Data[options.slideMenu]['slide-menu']
           ? 'slide-menu'
           : this.Data[options.slideMenu]['slide-menu-right']
-          ? 'slide-menu-right'
-          : 'slide-menu-left';
+            ? 'slide-menu-right'
+            : 'slide-menu-left';
         const callBack = () => {
           s(`.${idModal}`).style.transition = '0.3s';
           s(`.${idModal}`).style.width = `${windowGetW() - this.Data[options.slideMenu][idSlide].width}px`;
@@ -2038,7 +2041,10 @@ const Modal = {
       setTopModal();
       this.Data[idModal].onClickListener[`${idModal}-z-index`] = () => {
         if (s(`.${idModal}`) && s(`.${idModal}`).style.zIndex === '3') {
-          if (this.Data[idModal].options.route) setPath(`${getProxyPath()}${this.Data[idModal].options.route}`);
+          if (this.Data[idModal].options.route)
+            setPath(
+              `${getProxyPath()}${this.Data[idModal].options.route}${location.search ?? ''}${location.hash ?? ''}`,
+            );
           cleanTopModal();
           setTopModal();
         }
@@ -2159,6 +2165,8 @@ const Modal = {
       };
     });
   },
+  labelSelectorTopOffsetStartAnimation: `-40px`,
+  labelSelectorTopOffsetEndAnimation: `-3px`,
   menuTextLabelAnimation: (idModal, subMenuId) => {
     if (
       !s(
@@ -2193,12 +2201,12 @@ const Modal = {
           el.style.transition = null;
         });
         sa(labelSelector).forEach((el) => {
-          el.style.top = '-40px';
+          el.style.top = Modal.labelSelectorTopOffsetStartAnimation;
         });
       }, 300);
       setTimeout(() => {
         sa(labelSelector).forEach((el) => {
-          el.style.top = '-3px';
+          el.style.top = Modal.labelSelectorTopOffsetEndAnimation;
         });
       }, 400);
     }