@khipu/design-system 0.2.0-alpha.13 → 0.2.0-alpha.131

package/dist/beercss/khipu-beercss.js

@@ -892,11 +892,87 @@ const ui = _context.ui;
         initCountdown();
         initSegmentedTabs();
         initStickyInvoice();
+        initHideOnScroll();
         initBankModal();
+        initMerchantLogoBackdrop();
 
         console.log('Material Design initialization complete!');
     }
 
+    /**
+     * Initialize merchant logo backdrop (KTUF-204)
+     * Los logos de comercio van sobre el fondo neutro, no sobre el color de marca (los PNG
+     * con transparencia se ahogan contra su propio color). La luminancia decide entre los
+     * dos neutros: paper para logos oscuros, gray-800 para logos claros. Espejo vanilla de
+     * KdsInvoiceMerchant/logoLuminance.ts para las vistas server-side (payment).
+     * @param {Element} root - Root element to scope the query (default: document)
+     */
+    function initMerchantLogoBackdrop(root) {
+        root = root || document;
+        var LIGHT_LOGO_LUMINANCE_THRESHOLD = 0.72;
+        var SAMPLE_SIZE = 16;
+        var ALPHA_THRESHOLD = 128;
+        var MIN_OPAQUE_RATIO = 0.02;
+
+        root.querySelectorAll('.kds-invoice-merchant').forEach(function(tile) {
+            var img = tile.querySelector('img');
+            if (!img) return;
+
+            /* Con logo: fondo neutro; el color de marca queda solo para el fallback. */
+            var brandBackground = tile.style.background;
+            tile.style.background = '';
+            tile.classList.add('kds-invoice-merchant-neutral');
+
+            /* Si el logo falla (el onerror server-side lo reemplaza por el ícono),
+               restaurar el tile de color de marca. */
+            img.addEventListener('error', function() {
+                tile.classList.remove('kds-invoice-merchant-neutral', 'dark');
+                tile.style.background = brandBackground;
+            });
+
+            measureLogoLuminance(img.getAttribute('src'), function(luminance) {
+                if (luminance != null && luminance > LIGHT_LOGO_LUMINANCE_THRESHOLD &&
+                        tile.classList.contains('kds-invoice-merchant-neutral')) {
+                    tile.classList.add('dark');
+                }
+            });
+        });
+
+        function measureLogoLuminance(url, callback) {
+            if (!url) { callback(null); return; }
+            var probe = new Image();
+            probe.crossOrigin = 'anonymous';
+            probe.onload = function() {
+                try {
+                    var canvas = document.createElement('canvas');
+                    canvas.width = SAMPLE_SIZE;
+                    canvas.height = SAMPLE_SIZE;
+                    var context = canvas.getContext('2d');
+                    if (!context) { callback(null); return; }
+                    context.drawImage(probe, 0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
+                    var data = context.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE).data;
+                    var sum = 0;
+                    var opaquePixels = 0;
+                    for (var i = 0; i < data.length; i += 4) {
+                        if (data[i + 3] < ALPHA_THRESHOLD) continue;
+                        sum += (0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2]) / 255;
+                        opaquePixels++;
+                    }
+                    if (opaquePixels < SAMPLE_SIZE * SAMPLE_SIZE * MIN_OPAQUE_RATIO) {
+                        callback(null);
+                        return;
+                    }
+                    callback(sum / opaquePixels);
+                } catch (e) {
+                    /* canvas tainted: el origen no permite CORS — no medible */
+                    callback(null);
+                }
+            };
+            probe.onerror = function() { callback(null); };
+            probe.src = url;
+        }
+    }
+
     /**
      * Initialize sidenav for mobile navigation
      */
@@ -1051,8 +1127,12 @@ const ui = _context.ui;
             if (panel) {
                 if (expanded) {
                     panel.classList.remove('open');
+                    // Clear the inline cap so the CSS collapse rule (max-height: 0) animates the close.
+                    panel.style.maxHeight = '';
                 } else {
                     panel.classList.add('open');
+                    // Size to the content so the expand fits any length instead of clipping a fixed cap.
+                    panel.style.maxHeight = panel.scrollHeight + 'px';
                 }
             }
         });
@@ -1330,9 +1410,9 @@ const ui = _context.ui;
     function initStickyInvoice(root) {
         root = root || document;
 
-        // Progressive collapse range: 0px (expanded) to 30px (collapsed)
+        // Progressive collapse range: 0px (expanded) to 20px (collapsed)
         var COLLAPSE_START = 0;
-        var COLLAPSE_END = 30;
+        var COLLAPSE_END = 20;
 
         var lastScrollY = 0;
         var ticking = false;
@@ -1380,13 +1460,16 @@ const ui = _context.ui;
                 if (!currentScreen.style.getPropertyValue('--collapse-collapsible-h')) {
                     var collapsible = currentSticky.querySelector('.kds-invoice-collapsible');
                     if (collapsible) {
-                        currentScreen.style.setProperty('--collapse-collapsible-h', Math.min(collapsible.offsetHeight, 87) + 'px');
+                        currentScreen.style.setProperty('--collapse-collapsible-h', collapsible.offsetHeight + 'px');
                     }
                 }
 
                 // Single DOM write per frame — set on screen (parent) so it cascades to sticky + siblings
                 currentScreen.style.setProperty('--collapse-progress', progress);
 
+                // Toggle collapsed state class for discrete styling that can't interpolate (e.g. align-items)
+                currentSticky.classList.toggle('is-collapsed', progress >= 1);
+
                 // Close expand panels as soon as the sticky header starts collapsing
                 if (progress > 0) {
                     currentSticky.querySelectorAll('[data-expand-toggle][aria-expanded="true"]').forEach(function(toggle) {
@@ -1410,6 +1493,9 @@ const ui = _context.ui;
                     screen.style.removeProperty('--collapse-progress');
                     screen.style.removeProperty('--collapse-collapsible-h');
                 });
+                root.querySelectorAll('.kds-invoice-sticky.is-collapsed').forEach(function(el) {
+                    el.classList.remove('is-collapsed');
+                });
             }
         });
 
@@ -1419,6 +1505,67 @@ const ui = _context.ui;
         onScroll();
     }
 
+    /**
+     * Initialize hide-on-scroll for floating elements (vanilla equivalent of the React
+     * `useHideOnScroll` hook). Any element with `[data-hide-on-scroll]` gets its hide class
+     * (default `kds-fab--hidden`, override with `data-hide-class`) toggled: hidden when
+     * scrolling down past the threshold, shown when scrolling up, always shown within
+     * `data-hide-top-offset` px of the top. Tune with `data-hide-threshold` (default 8).
+     *
+     * Works standalone (`window.scrollY`) and embedded in an iframe, where the parent posts
+     * `postMessage({ type: 'VIEWPORT_OFFSET', offsetTop })`.
+     * @param {Element} root - Root element to scope the query (default: document)
+     */
+    function initHideOnScroll(root) {
+        root = root || document;
+        var els = root.querySelectorAll('[data-hide-on-scroll]');
+        if (!els.length) return;
+
+        var viewportOffset = 0;
+        var ticking = false;
+        var lastYs = new Map();
+
+        function currentY() {
+            return Math.max(window.scrollY || window.pageYOffset || 0, viewportOffset);
+        }
+
+        function apply() {
+            ticking = false;
+            var y = currentY();
+            els.forEach(function(el) {
+                var threshold = parseInt(el.getAttribute('data-hide-threshold'), 10) || 8;
+                var topOffset = parseInt(el.getAttribute('data-hide-top-offset'), 10) || 0;
+                var hideClass = el.getAttribute('data-hide-class') || 'kds-fab--hidden';
+                var lastY = lastYs.has(el) ? lastYs.get(el) : y;
+                if (y <= topOffset) {
+                    el.classList.remove(hideClass);
+                    lastYs.set(el, y);
+                    return;
+                }
+                var delta = y - lastY;
+                if (Math.abs(delta) < threshold) return;
+                el.classList.toggle(hideClass, delta > 0);
+                lastYs.set(el, y);
+            });
+        }
+
+        function onScroll() {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(apply);
+        }
+
+        window.addEventListener('scroll', onScroll, { passive: true });
+        window.addEventListener('resize', onScroll);
+        window.addEventListener('message', function(event) {
+            if (event.data && event.data.type === 'VIEWPORT_OFFSET') {
+                viewportOffset = Math.max(0, event.data.offsetTop || 0);
+                onScroll();
+            }
+        });
+        apply();
+    }
+
     /**
      * Initialize copyable table rows
      * Delegated click on .kds-copyable-table-row[data-copy] copies value and shows feedback
@@ -1461,7 +1608,7 @@ const ui = _context.ui;
             var rows = container.querySelectorAll('.kds-copyable-table-row[data-copy]');
             var values = [];
             rows.forEach(function(r) {
-                var key = r.querySelector('.k');
+                var key = r.querySelector('.kds-key');
                 var val = r.dataset.copy;
                 if (key) {
                     values.push(key.textContent.trim() + ': ' + val);
@@ -1589,6 +1736,7 @@ const ui = _context.ui;
     window.Khipu.initInfoTip = initInfoTip;
     window.Khipu.initBankModal = initBankModal;
     window.Khipu.initStickyInvoice = initStickyInvoice;
+    window.Khipu.initHideOnScroll = initHideOnScroll;
 
     // Also export showSnackbar to global scope for backward compatibility
     window.showSnackbar = showSnackbar;