@khipu/design-system 0.3.5-alpha.2 → 0.3.5-alpha.20
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.
- package/dist/beercss/khipu-beercss.css +169 -23
- package/dist/beercss/khipu-beercss.js +5 -61
- package/dist/beercss/khipu-beercss.min.css +1 -1
- package/dist/beercss/khipu-beercss.min.js +1 -1
- package/dist/beercss/khipu-beercss.scoped.css +168 -23
- package/dist/beercss/khipu-beercss.scoped.min.css +1 -1
- package/dist/beercss/metadata.json +5 -5
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +162 -214
- package/dist/index.mjs +31 -84
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
const _emptyNodeList=[],_weakElements=new WeakSet,isChrome=navigator.userAgent.includes("Chrome");navigator.userAgent.includes("Firefox"),navigator.userAgent.includes("Safari"),navigator.userAgent.includes("Windows");const isMac=navigator.userAgent.includes("Macintosh");navigator.userAgent.includes("Linux"),navigator.userAgent.includes("Android");const isIOS=/iPad|iPhone|iPod/.test(navigator.userAgent);function isDark(){return null==window?void 0:window.matchMedia("(prefers-color-scheme: dark)").matches}async function wait(e){await new Promise(t=>setTimeout(t,e))}function guid(){return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,e=>{const t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)})}function query(e,t){try{return"string"==typeof e?(t??document).querySelector(e):e}catch{return null}}function queryAll(e,t){try{return"string"==typeof e?(t??document).querySelectorAll(e):e??_emptyNodeList}catch{return _emptyNodeList}}function hasClass(e,t){return(null==e?void 0:e.classList.contains(t))??!1}function hasTag(e,t){var n;return(null==(n=null==e?void 0:e.tagName)?void 0:n.toLowerCase())===t}function hasType(e,t){var n;return(null==(n=null==e?void 0:e.type)?void 0:n.toLowerCase())===t}function addClass(e,t){if(e instanceof NodeList)for(let n=0;n<e.length;n++)e[n].classList.add(t);else null==e||e.classList.add(t)}function removeClass(e,t){if(e instanceof NodeList)for(let n=0;n<e.length;n++)e[n].classList.remove(t);else null==e||e.classList.remove(t)}function on(e,t,n,a=!0){(null==e?void 0:e.addEventListener)&&e.addEventListener(t,n,a)}function onWeak(e,t,n,a=!0){addWeakElement(e),on(e,t,n,a)}function off(e,t,n,a=!0){(null==e?void 0:e.removeEventListener)&&e.removeEventListener(t,n,a)}function insertBefore(e,t){var n;null==(n=null==t?void 0:t.parentNode)||n.insertBefore(e,t)}function prev(e){return null==e?void 0:e.previousElementSibling}function next(e){return null==e?void 0:e.nextElementSibling}function parent(e){return null==e?void 0:e.parentElement}function create(e){const t=document.createElement("div");for(let n=0,a=Object.keys(e),o=a.length;n<o;n++){const o=a[n],i=e[o];t.setAttribute(o,i)}return t}function blurActiveElement(){var e;null==(e=document.activeElement)||e.blur()}function queryAllDataUi(e){return queryAll('[data-ui="#'+e+'"]')}function queryDataUi(e){return query('[data-ui="#'+e+'"]')}function updateAllClickable(e){e.id&&hasClass(e,"page")&&(e=queryDataUi(e.id)??e);const t=parent(e);if(!hasClass(t,"tabs")&&!hasClass(t,"tabbed")&&!hasTag(t,"nav"))return;const n=queryAll("a",t);for(let e=0;e<n.length;e++)removeClass(n[e],"active");hasTag(e,"button")||hasClass(e,"button")||hasClass(e,"chip")||addClass(e,"active")}function addWeakElement(e){_weakElements.has(e)||_weakElements.add(e)}function rootSizeInPixels(){const e=getComputedStyle(document.documentElement).getPropertyValue("--size")||"16px";return e.includes("%")?16*parseInt(e)/100:e.includes("em")?16*parseInt(e):parseInt(e)}function updatePlaceholder(e){e.placeholder||(e.placeholder=" ")}function onClickLabel(e){const t=query("input:not([type=file], [type=checkbox], [type=radio]), select, textarea",parent(e.currentTarget));t&&t.focus()}function onFocusInput(e){updateInput(e.currentTarget)}function onBlurInput(e){updateInput(e.currentTarget)}function onChangeFile(e){updateFile(e.currentTarget)}function onChangeColor(e){updateColor(e.currentTarget)}function onKeydownFile(e){updateFile(e.currentTarget,e)}function onKeydownColor(e){updateColor(e.currentTarget,e)}function onPasswordIconClick(e){var t;const n=e.currentTarget,a=query("input",parent(n));a&&(null==(t=n.textContent)?void 0:t.includes("visibility"))&&("password"===a.type?(a.type="text",n.textContent="visibility_off"):(a.type="password",n.textContent="visibility"))}function onInputTextarea(e){updateTextarea(e.currentTarget)}function updateAllLabels(){const e=queryAll(".field > label");for(let t=0;t<e.length;t++)onWeak(e[t],"click",onClickLabel)}function updateAllInputs(){const e=queryAll(".field > input:not([type=file], [type=color], [type=range])");for(let t=0;t<e.length;t++)onWeak(e[t],"focus",onFocusInput),onWeak(e[t],"blur",onBlurInput),updateInput(e[t])}function updateAllSelects(){const e=queryAll(".field > select");for(let t=0;t<e.length;t++)onWeak(e[t],"focus",onFocusInput),onWeak(e[t],"blur",onBlurInput)}function updateAllFiles(){const e=queryAll(".field > input[type=file]");for(let t=0;t<e.length;t++)onWeak(e[t],"change",onChangeFile),updateFile(e[t])}function updateAllColors(){const e=queryAll(".field > input[type=color]");for(let t=0;t<e.length;t++)onWeak(e[t],"change",onChangeColor),updateColor(e[t])}function updateAllTextareas(){const e=queryAll(".field > textarea");for(let t=0;t<e.length;t++)onWeak(e[t],"focus",onFocusInput),onWeak(e[t],"blur",onBlurInput),updatePlaceholder(e[t]),(!isChrome||isMac||isIOS)&&(onWeak(e[t],"input",onInputTextarea),updateTextarea(e[t]))}function updateAllPasswordIcons(){const e=queryAll(".field:has(> input[type=password]) > i, a");for(let t=0;t<e.length;t++)onWeak(e[t],"click",onPasswordIconClick)}function updateInput(e){hasType(e,"number")&&!e.value&&(e.value=""),updatePlaceholder(e)}function updateFile(e,t){if("Enter"===(null==t?void 0:t.key)){const t=prev(e);if(!hasType(t,"file"))return;return void t.click()}const n=next(e);hasType(n,"text")&&(n.value=e.files?Array.from(e.files).map(e=>e.name).join(", "):"",n.readOnly=!0,onWeak(n,"keydown",onKeydownFile,!1),updateInput(n))}function updateColor(e,t){if("Enter"===(null==t?void 0:t.key)){const t=prev(e);if(!hasType(t,"color"))return;return void t.click()}const n=next(e);hasType(n,"text")&&(n.readOnly=!0,n.value=e.value,onWeak(n,"keydown",onKeydownColor,!1),updateInput(n))}function updateTextarea(e){if(updatePlaceholder(e),e.hasAttribute("rows"))return;const t=rootSizeInPixels();e.style.blockSize="auto",e.style.blockSize=e.scrollHeight-t+"px"}function updateAllFields(){updateAllLabels(),updateAllInputs(),updateAllSelects(),updateAllFiles(),updateAllColors(),updateAllTextareas(),updateAllPasswordIcons()}function onInputDocument$1(e){const t=e.target;(hasTag(t,"input")||hasTag(t,"select"))&&("range"===t.type?(t.focus(),updateRange(t)):updateAllRanges())}function onChangeInput(e){if(!window.matchMedia("(pointer: coarse)").matches)return;e.target.blur()}function updateAllRanges(){const e=document.body,t=queryAll(".slider > input[type=range]");t.length?on(e,"input",onInputDocument$1,!1):off(e,"input",onInputDocument$1,!1);for(let e=0;e<t.length;e++)updateRange(t[e])}function updateRange(e){onWeak(e,"change",onChangeInput);const t=parent(e),n=query("span",t),a=queryAll("input",t);if(!a.length||!n)return;const o=rootSizeInPixels(),i=hasClass(t,"max")?0:.25*o*100/a[0].offsetWidth,r=[],s=[];for(let e=0,t=a.length;e<t;e++){const t=parseFloat(a[e].min)||0,n=parseFloat(a[e].max)||100,o=parseFloat(a[e].value)||0,l=100*(o-t)/(n-t),c=i/2-i*l/100;r.push(l+c),s.push(o)}let l=r[0],c=0,u=100-c-l,d=s[0],p=s[1]||0;a.length>1&&(l=Math.abs(r[1]-r[0]),c=r[1]>r[0]?r[0]:r[1],u=100-c-l,p>d&&(d=s[1]||0,p=s[0])),requestAnimationFrame(()=>t.style.cssText=`--_start: ${c}%; --_end: ${u}%; --_value1: '${d}'; --_value2: '${p}';`)}function updateAllSliders(){updateAllRanges()}const _lastTheme={light:"",dark:""};function getMode(){var e;return(null==(e=null==document?void 0:document.body)?void 0:e.classList.contains("dark"))?"dark":"light"}function lastTheme(){if(_lastTheme.light&&_lastTheme.dark)return _lastTheme;const e=document.body,t=document.createElement("body");t.className="light",e.appendChild(t);const n=document.createElement("body");n.className="dark",e.appendChild(n);const a=getComputedStyle(t),o=getComputedStyle(n),i=["--primary","--on-primary","--primary-container","--on-primary-container","--secondary","--on-secondary","--secondary-container","--on-secondary-container","--tertiary","--on-tertiary","--tertiary-container","--on-tertiary-container","--error","--on-error","--error-container","--on-error-container","--background","--on-background","--surface","--on-surface","--surface-variant","--on-surface-variant","--outline","--outline-variant","--shadow","--scrim","--inverse-surface","--inverse-on-surface","--inverse-primary","--surface-dim","--surface-bright","--surface-container-lowest","--surface-container-low","--surface-container","--surface-container-high","--surface-container-highest"];for(let e=0,t=i.length;e<t;e++)_lastTheme.light+=i[e]+":"+a.getPropertyValue(i[e])+";",_lastTheme.dark+=i[e]+":"+o.getPropertyValue(i[e])+";";return e.removeChild(t),e.removeChild(n),_lastTheme}async function updateTheme(e){const t=globalThis,n=document.body;return e&&t.materialDynamicColors?e.light&&e.dark?(_lastTheme.light=e.light,_lastTheme.dark=e.dark,n.setAttribute("style",e[getMode()]),e):t.materialDynamicColors(e).then(e=>{const t=e=>{let t="";for(let n=0,a=Object.keys(e),o=a.length;n<o;n++){const o=a[n],i=e[o];t+="--"+o.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()+":"+i+";"}return t};return _lastTheme.light=t(e.light),_lastTheme.dark=t(e.dark),n.setAttribute("style",_lastTheme[getMode()]),_lastTheme}):lastTheme()}function updateMode(e){const t=globalThis,n=document.body;if(!n)return e;if(!e)return getMode();"auto"===e&&(e=isDark()?"dark":"light"),n.classList.remove("light","dark"),n.classList.add(e);const a="light"===e?_lastTheme.light:_lastTheme.dark;return t.materialDynamicColors&&n.setAttribute("style",a),getMode()}const _dialogs=[];function onKeydownDialog(e){if("Escape"===e.key){const t=e.currentTarget;updateDialog(t,t)}}function focusOnDialogOrElement(e){(query("[autofocus]",e)??e).focus()}function closeDialog(e,t){removeClass(queryAllDataUi(e.id),"active"),removeClass(e,"active"),removeClass(t,"active"),e.close(),_dialogs.pop();const n=_dialogs[_dialogs.length-1];n&&n.focus()}async function openDialog(e,t,n,a){hasTag(a,"button")||hasClass(a,"button")||hasClass(a,"chip")||addClass(a,"active"),addClass(t,"active"),addClass(e,"active"),n?e.showModal():e.show(),await wait(90),n||on(e,"keydown",onKeydownDialog,!1),_dialogs.push(e),focusOnDialogOrElement(e)}function onClickOverlay(e){const t=e.currentTarget,n=next(t);hasTag(n,"dialog")&&closeDialog(n,t)}async function updateDialog(e,t){blurActiveElement();let n=prev(t);const a=hasClass(t,"active")||t.open,o=hasClass(t,"modal");o||off(t,"keydown",onKeydownDialog,!1),hasClass(n,"overlay")||(n=create({class:"overlay"}),insertBefore(n,t),await wait(90)),o||onWeak(n,"click",onClickOverlay,!1),a?closeDialog(t,n):openDialog(t,n,o,e)}let _timeoutMenu,_timeoutSnackbar;function onClickDocument(e){off(document.body,"click",onClickDocument);const t=e.target,n=queryAll("menu.active");for(let a=0;a<n.length;a++)updateMenu(t,n[a],e)}function focusOnMenuOrInput(e){setTimeout(()=>{const t=query(".field > input",e);t?t.focus():e.focus()},90)}function updateMenu(e,t,n){_timeoutMenu&&clearTimeout(_timeoutMenu),_timeoutMenu=setTimeout(()=>{on(document.body,"click",onClickDocument),hasTag(document.activeElement,"input")||blurActiveElement();const a=hasClass(t,"active"),o=(null==n?void 0:n.target)===e,i=!!e.closest("menu");!a&&i||a&&o?removeClass(t,"active"):(removeClass(queryAll("menu.active"),"active"),addClass(t,"active"),focusOnMenuOrInput(t))},90)}function onClickSnackbar(e){removeClass(e.currentTarget,"active"),_timeoutSnackbar&&clearTimeout(_timeoutSnackbar)}function updateSnackbar(e,t){blurActiveElement();const n=queryAll(".snackbar.active");for(let e=0;e<n.length;e++)removeClass(n[e],"active");addClass(e,"active"),onWeak(e,"click",onClickSnackbar),_timeoutSnackbar&&clearTimeout(_timeoutSnackbar),-1!==t&&(_timeoutSnackbar=setTimeout(()=>{removeClass(e,"active")},t??6e3))}function updatePage(e){const t=parent(e);t&&removeClass(queryAll(":scope > .page",t),"active"),addClass(e,"active")}function onMousedownRipple(e){updateRipple(e)}function onKeydownRipple(e){" "===(null==e?void 0:e.key)&&updateRipple(e)}function updateRipple(e){const t=e instanceof MouseEvent,n=e.currentTarget,a=n.getBoundingClientRect(),o=Math.max(a.width,a.height),i=o/2,r=t?e.clientX-a.left-i:a.width/2-i,s=t?e.clientY-a.top-i:a.height/2-i,l=document.createElement("div");l.className="ripple-js";const c=document.createElement("div");c.style.inlineSize=c.style.blockSize=`${o}px`,c.style.left=`${r}px`,c.style.top=`${s}px`,onWeak(c,"animationend",()=>{l.remove()}),l.appendChild(c),n.appendChild(l)}function updateAllRipples(){const e=queryAll(".slow-ripple, .ripple, .fast-ripple");for(let t=0;t<e.length;t++)onWeak(e[t],"mousedown",onMousedownRipple),onWeak(e[t],"keydown",onKeydownRipple)}function onInputDocument(e){const t=e.target;hasTag(t,"progress")?updateProgress(t):updateAllProgress()}function updateProgress(e){requestAnimationFrame(()=>{if(e.hasAttribute("value")||e.hasAttribute("max"))e.style.setProperty("--_value",String(e.value));else{const t=hasClass(e,"circle")?"50":"100";e.style.setProperty("--_value",t),e.setAttribute("value",t),e.setAttribute("max","100"),e.classList.add("indeterminate")}})}function updateAllProgress(){if(isChrome&&!isMac&&!isIOS)return;const e=document.body,t=queryAll("progress");t.length?on(e,"input",onInputDocument,!1):off(e,"input",onInputDocument,!1);for(let e=0;e<t.length;e++)updateProgress(t[e])}const _context=globalThis;let _timeoutMutation,_mutation;function onMutation(){_timeoutMutation&&clearTimeout(_timeoutMutation),_timeoutMutation=setTimeout(async()=>await _ui(),180)}async function run(e,t,n,a){if(t||(t=query(e.getAttribute("data-ui"))))if(updateAllClickable(e),hasTag(t,"dialog"))requestAnimationFrame(()=>updateDialog(e,t));else if(hasTag(t,"menu"))requestAnimationFrame(()=>updateMenu(e,t,a));else if(hasClass(t,"snackbar"))requestAnimationFrame(()=>updateSnackbar(t,n));else{if(!hasClass(t,"page"))return hasClass(t,"active")?(removeClass(e,"active"),void removeClass(t,"active")):void addClass(t,"active");requestAnimationFrame(()=>updatePage(t))}else e.classList.toggle("active")}function onClickElement(e){run(e.currentTarget,null,null,e)}function onKeydownElement(e){"Enter"===e.key&&run(e.currentTarget,null,null,e)}function setup(){_context.ui||_mutation||!_context.MutationObserver||(_mutation=new MutationObserver(onMutation),_mutation.observe(document.body,{childList:!0,subtree:!0}),onMutation())}function updateAllDataUis(){const e=queryAll("[data-ui]");for(let t=0,n=e.length;t<n;t++)onWeak(e[t],"click",onClickElement),hasTag(e[t],"a")&&!e[t].getAttribute("href")&&onWeak(e[t],"keydown",onKeydownElement)}function _ui(e,t){if(e){if("setup"===e)return void setup();if("guid"===e)return guid();if("mode"===e)return updateMode(t);if("theme"===e)return updateTheme(t);const n=query(e);if(!n)return;run(n,n,t)}updateAllDataUis(),updateAllFields(),updateAllRipples(),updateAllSliders(),updateAllProgress()}function start(){var e;if(_context.ui)return;const t=null==(e=_context.document)?void 0:e.body;!t||t.classList.contains("dark")||t.classList.contains("light")||updateMode("auto"),setup(),_context.ui=_ui}start();const ui=_context.ui;!function(e){"use strict";const t={init:function(e={}){const t={sidebarSelector:e.sidebarSelector||".kds-sidebar"},n=document.querySelector(t.sidebarSelector);n?(!function(e){if(!e)return;const t=e.querySelector(".kds-sidebar-header"),n=e.querySelector(".kds-sidebar-header-dropdown");if(!t||!n)return;t.addEventListener("click",function(e){e.stopPropagation(),n.classList.toggle("kds-dropdown-open");const a=t.querySelector(".kds-sidebar-dropdown-icon");a&&(a.style.transform=n.classList.contains("kds-dropdown-open")?"rotate(180deg)":"rotate(0deg)")}),document.addEventListener("click",function(a){if(!e.contains(a.target)){n.classList.remove("kds-dropdown-open");const e=t.querySelector(".kds-sidebar-dropdown-icon");e&&(e.style.transform="rotate(0deg)")}}),n.querySelectorAll("a").forEach(e=>{e.addEventListener("click",function(){n.classList.remove("kds-dropdown-open");const e=t.querySelector(".kds-sidebar-dropdown-icon");e&&(e.style.transform="rotate(0deg)")})})}(n),function(e){if(!e)return;const t=e.querySelectorAll(".kds-sidebar-nav-item");t.forEach(n=>{n.addEventListener("click",function(n){"#"===this.getAttribute("href")&&n.preventDefault(),t.forEach(e=>{e.classList.remove("active")}),this.classList.add("active");const a=new CustomEvent("kds-sidebar-nav-change",{detail:{item:this,text:this.querySelector("span")?.textContent||""},bubbles:!0});e.dispatchEvent(a)})})}(n),function(){const e=document.querySelector(".kds-hamburger-btn"),t=document.querySelector(".kds-sidebar-close-btn"),n=document.querySelector(".kds-sidebar");e&&n&&(e.addEventListener("click",function(){n.classList.toggle("kds-sidebar-open")}),t&&t.addEventListener("click",function(){n.classList.remove("kds-sidebar-open")}),document.addEventListener("keydown",function(e){"Escape"===e.key&&n.classList.contains("kds-sidebar-open")&&n.classList.remove("kds-sidebar-open")}))}(),console.log("[Khipu Sidebar] Initialized successfully")):console.warn("[Khipu Sidebar] Sidebar not found with selector:",t.sidebarSelector)}};"function"==typeof define&&define.amd?define(function(){return t}):"object"==typeof module&&module.exports?module.exports=t:e.KhipuSidebar=t}("undefined"!=typeof window?window:this),function(){"use strict";function e(){console.log("Initializing Khipu Material Design components..."),void 0!==window.KhipuSidebar&&window.KhipuSidebar.init(),function(){const e=document.getElementById("menu-toggle"),t=document.getElementById("material-sidenav");e&&t&&(e.addEventListener("click",function(){t.classList.toggle("active")}),document.addEventListener("click",function(n){if(t.classList.contains("active")){t.contains(n.target)||e.contains(n.target)||t.classList.remove("active")}}))}(),document.querySelectorAll('.snackbar[data-auto-dismiss="true"]').forEach(function(e){var t=e.querySelector("span");t&&t.classList.add("max");var a=document.createElement("button");a.className="kds-snackbar-close",a.setAttribute("aria-label","Cerrar"),a.innerHTML='<i class="material-symbols-outlined">close</i>',a.onclick=function(){n(e)},e.appendChild(a),setTimeout(function(){n(e)},5e3)}),window.closeModal=function(e){const t=document.getElementById(e);t&&t.classList.remove("active")},a(),o(),i(),r(),p(),f(),m(),s(),l(),u(),d(),c(),function(e){e=e||document;var t=.72,n=16,a=128,o=.02;function i(e,t){if(e){var i=new Image;i.crossOrigin="anonymous",i.onload=function(){try{var e=document.createElement("canvas");e.width=n,e.height=n;var r=e.getContext("2d");if(!r)return void t(null);r.drawImage(i,0,0,n,n);for(var s=r.getImageData(0,0,n,n).data,l=0,c=0,u=0;u<s.length;u+=4)s[u+3]<a||(l+=(.2126*s[u]+.7152*s[u+1]+.0722*s[u+2])/255,c++);if(c<n*n*o)return void t(null);t(l/c)}catch(e){t(null)}},i.onerror=function(){t(null)},i.src=e}else t(null)}e.querySelectorAll(".kds-invoice-merchant").forEach(function(e){var n=e.querySelector("img");if(n){var a=e.style.background;e.style.background="",e.classList.add("kds-invoice-merchant-neutral"),n.addEventListener("error",function(){e.classList.remove("kds-invoice-merchant-neutral","dark"),e.style.background=a}),i(n.getAttribute("src"),function(n){null!=n&&n>t&&e.classList.contains("kds-invoice-merchant-neutral")&&e.classList.add("dark")})}})}(),t(),console.log("Material Design initialization complete!")}function t(e){e=e||document;if(!("undefined"==typeof ResizeObserver||"function"!=typeof Element.prototype.animate||window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches)){var t=e.querySelectorAll(".kds-screen > .kds-card-elevated");Array.prototype.forEach.call(t,function(e){if("on"!==e.getAttribute("data-kds-height-transition")){e.setAttribute("data-kds-height-transition","on");var t=e.offsetHeight,n=!1,a=new ResizeObserver(function(){if(!n){var a=e.offsetHeight;if(Math.abs(a-t)<8)t=a;else{n=!0;var o=e.animate([{height:t+"px"},{height:a+"px"}],{duration:280,easing:"ease-out"});t=a,o.finished.then(function(){n=!1,t=e.offsetHeight}).catch(function(){n=!1})}}});a.observe(e)}})}}function n(e){e.classList.remove("active"),setTimeout(function(){e.remove()},300)}function a(e){(e=e||document).querySelectorAll(".kds-invoice-sticky").forEach(function(e){if(!e.querySelector(".kds-brand-inner")){var t=e.closest(".kds-screen")||e.parentElement,n=t?t.querySelector(".kds-brand-row"):null,a=n?n.querySelector("svg, img"):null;if(a){var o=e.querySelector(".kds-invoice-header"),i=o?o.firstElementChild:null;if(i){var r=document.createElement("div");r.className="kds-brand-inner",r.appendChild(a.cloneNode(!0)),i.insertBefore(r,i.firstChild)}}}})}function o(e){(e=e||document).querySelectorAll(".kds-screen").forEach(function(e){var t=e.querySelector(".kds-secure-footer");if(t){var n=e.querySelectorAll(".kds-card-elevated:not(.kds-invoice-sticky)");if(n.length){var a=n[n.length-1];t.classList.add("inside"),a.appendChild(t)}}})}function i(e){(e=e||document).addEventListener("click",function(e){var t=e.target.closest("[data-expand-toggle]");if(t){var n="true"===t.getAttribute("aria-expanded");t.setAttribute("aria-expanded",String(!n));var a=t.getAttribute("aria-controls"),o=a?document.getElementById(a):t.parentElement.querySelector("[data-expand-panel]");o&&(n?(o.classList.remove("open"),o.style.maxHeight=""):(o.classList.add("open"),o.style.maxHeight=o.scrollHeight+"px"))}})}function r(e){(e=e||document).addEventListener("click",function(e){var t=e.target.closest(".kds-copy-row[data-copy]");if(t)navigator.clipboard.writeText(t.dataset.copy).then(function(){t.classList.add("copied"),setTimeout(function(){t.classList.remove("copied")},1200)});else{var n=e.target.closest(".kds-copy-all[data-copy-all]");if(n){var a=n.dataset.copyAll,o=a?document.querySelector(a):n.closest(".kds-copy-header").nextElementSibling;if(!o)return;var i=o.querySelectorAll("[data-copy]"),r=[];i.forEach(function(e){r.push(e.dataset.copy)}),navigator.clipboard.writeText(r.join("\n")).then(function(){i.forEach(function(e){e.classList.add("copied"),setTimeout(function(){e.classList.remove("copied")},1200)})})}}})}function s(e){(e=e||document).querySelectorAll(".kds-countdown[data-deadline]").forEach(function(e){var t=new Date(e.dataset.deadline).getTime(),n=e.dataset.serverNow?new Date(e.dataset.serverNow).getTime():Date.now(),a=Date.now()-n,o=e.querySelector("[data-h]"),i=e.querySelector("[data-m]"),r=e.querySelector("[data-s]");function s(e){return e<10?"0"+e:String(e)}function l(){var n=Date.now()-a,l=Math.max(0,t-n),u=Math.floor(l/1e3),d=Math.floor(u/3600),p=Math.floor(u%3600/60),f=u%60;o&&(o.textContent=s(d)),i&&(i.textContent=s(p)),r&&(r.textContent=s(f)),l<3e5&&e.classList.add("urgent"),l<=0&&(clearInterval(c),e.dispatchEvent(new CustomEvent("kds:countdown:expired",{bubbles:!0})))}l();var c=setInterval(l,1e3)})}function l(e){(e=e||document).querySelectorAll(".kds-segmented-tabs").forEach(function(e){var t=e.querySelectorAll("button");e.style.setProperty("--_tab-count",t.length);var n=0;t.forEach(function(e,t){(e.classList.contains("active")||"true"===e.getAttribute("aria-selected"))&&(n=t)}),e.style.setProperty("--_active-idx",n);var a=e.parentElement;a&&a.querySelectorAll("[data-kds-tab-panel]").forEach(function(e,t){e.hidden=t!==n})}),e.addEventListener("click",function(e){var t=e.target.closest(".kds-segmented-tabs button");if(t){var n=t.closest(".kds-segmented-tabs"),a=n.querySelectorAll("button");a.forEach(function(e){e.classList.remove("active"),e.setAttribute("aria-selected","false")}),t.classList.add("active"),t.setAttribute("aria-selected","true");var o=Array.prototype.indexOf.call(a,t);n.style.setProperty("--_active-idx",o);var i=n.parentElement;i&&i.querySelectorAll("[data-kds-tab-panel]").forEach(function(e,t){e.hidden=t!==o}),n.dispatchEvent(new CustomEvent("kds:tab:change",{bubbles:!0,detail:{index:o,button:t}}))}})}function c(e){var t=(e=e||document).querySelector("#bankModal"),n=e.querySelector("#bankSearch"),a=e.querySelector("#bankModalList"),o=e.querySelector("#bankNoResults");function i(e){if(a){var t=e.toLowerCase().trim(),n=a.querySelectorAll(".kds-bank-row"),i=0;n.forEach(function(e){var n=e.querySelector(".kds-bank-row-name");if(n){var a=n.textContent.toLowerCase(),o=!t||-1!==a.indexOf(t);e.style.display=o?"":"none",o&&i++}}),o&&o.classList.toggle("visible",0===i)}}t&&(e.addEventListener("click",function(e){e.target.closest("[data-open-bank-modal]")&&(t.classList.add("open"),n&&(n.value="",n.focus()),i(""))}),e.addEventListener("click",function(e){e.target.closest("[data-close-bank-modal]")&&t.classList.remove("open")}),a&&a.addEventListener("click",function(e){var n=e.target.closest(".kds-bank-row");if(n){var a=n.dataset.bankId||n.dataset.bank||"",o=n.querySelector(".kds-bank-row-name");t.dispatchEvent(new CustomEvent("kds:bank:selected",{bubbles:!0,detail:{id:a,name:o?o.textContent:"",element:n}})),t.classList.remove("open")}}),n&&n.addEventListener("input",function(e){i(e.target.value)}),window.Khipu||(window.Khipu={}),window.Khipu.filterBanks=i)}function u(e){e=e||document;var t=!1;function n(){return window.innerWidth<768}function a(){var a=e.querySelector(".kds-screen.active");if(a&&a.querySelector(".kds-invoice-sticky"))return n()?void(t||(t=!0,requestAnimationFrame(function(){t=!1;var n=e.querySelector(".kds-screen.active");if(n){var a=n.querySelector(".kds-invoice-sticky");if(a){var o=window.scrollY||window.pageYOffset,i=Math.min(Math.max((o-0)/20,0),1);if(!n.style.getPropertyValue("--collapse-collapsible-h")){var r=a.querySelector(".kds-invoice-collapsible");r&&n.style.setProperty("--collapse-collapsible-h",r.offsetHeight+"px")}n.style.setProperty("--collapse-progress",i),a.classList.toggle("is-collapsed",i>=1),i>0&&a.querySelectorAll('[data-expand-toggle][aria-expanded="true"]').forEach(function(e){e.setAttribute("aria-expanded","false");var t=e.getAttribute("aria-controls"),n=t?document.getElementById(t):null;n&&n.classList.remove("open")})}}}))):(a.style.removeProperty("--collapse-progress"),void a.style.removeProperty("--collapse-collapsible-h"))}window.addEventListener("resize",function(){n()||(e.querySelectorAll(".kds-screen").forEach(function(e){e.style.removeProperty("--collapse-progress"),e.style.removeProperty("--collapse-collapsible-h")}),e.querySelectorAll(".kds-invoice-sticky.is-collapsed").forEach(function(e){e.classList.remove("is-collapsed")}))}),window.addEventListener("scroll",a,{passive:!0}),a()}function d(e){var t=(e=e||document).querySelectorAll("[data-hide-on-scroll]");if(t.length){var n=0,a=!1,o=new Map;window.addEventListener("scroll",r,{passive:!0}),window.addEventListener("resize",r),window.addEventListener("message",function(e){e.data&&"VIEWPORT_OFFSET"===e.data.type&&(n=Math.max(0,e.data.offsetTop||0),r())}),i()}function i(){a=!1;var e=Math.max(window.scrollY||window.pageYOffset||0,n);t.forEach(function(t){var n=parseInt(t.getAttribute("data-hide-threshold"),10)||8,a=parseInt(t.getAttribute("data-hide-top-offset"),10)||0,i=t.getAttribute("data-hide-class")||"kds-fab--hidden",r=o.has(t)?o.get(t):e;if(e<=a)return t.classList.remove(i),void o.set(t,e);var s=e-r;Math.abs(s)<n||(t.classList.toggle(i,s>0),o.set(t,e))})}function r(){a||(a=!0,requestAnimationFrame(i))}}function p(e){(e=e||document).addEventListener("click",function(e){var t=e.target.closest(".kds-copyable-table-row[data-copy]");t&&navigator.clipboard.writeText(t.dataset.copy).then(function(){t.classList.add("copied"),setTimeout(function(){t.classList.remove("copied")},1200)})})}function f(e){(e=e||document).addEventListener("click",function(e){var t=e.target.closest(".kds-copy-all-btn[data-copy-all]");if(t){var n=t.dataset.copyAll,a=n?document.querySelector(n):t.previousElementSibling;if(a){var o=a.querySelectorAll(".kds-copyable-table-row[data-copy]"),i=[];o.forEach(function(e){var t=e.querySelector(".kds-key"),n=e.dataset.copy;t?i.push(t.textContent.trim()+": "+n):i.push(n)}),navigator.clipboard.writeText(i.join("\n")).then(function(){t.classList.add("copied");var e=t.querySelector("span:not(.kds-icon)"),n=e?e.textContent:"";e&&(e.textContent="Copiado"),o.forEach(function(e){e.classList.add("copied")}),setTimeout(function(){t.classList.remove("copied"),e&&(e.textContent=n),o.forEach(function(e){e.classList.remove("copied")})},1400)})}}})}function m(e){(e=e||document).querySelectorAll(".kds-info-tip[data-tip]").forEach(function(e){if(!e.querySelector(".kds-tip-bubble")){var t=document.createElement("span");t.className="kds-tip-bubble",t.setAttribute("role","tooltip"),t.textContent=e.dataset.tip,e.appendChild(t)}}),e.addEventListener("click",function(e){var t=e.target.closest(".kds-info-tip");if(t){e.preventDefault(),e.stopPropagation();var n="true"===t.getAttribute("aria-expanded");return document.querySelectorAll('.kds-info-tip[aria-expanded="true"]').forEach(function(e){e.setAttribute("aria-expanded","false")}),void t.setAttribute("aria-expanded",String(!n))}document.querySelectorAll('.kds-info-tip[aria-expanded="true"]').forEach(function(e){e.setAttribute("aria-expanded","false")})})}function v(e,t,a){t=t||"info",a=a||5e3;var o=document.createElement("div");o.className="snackbar active "+t,o.setAttribute("data-auto-dismiss","true"),o.style.setProperty("--kds-snackbar-duration",a+"ms");var i=document.createElement("i");i.className="material-symbols-outlined",i.textContent="success"===t?"check_circle":"error"===t?"error":"info";var r=document.createElement("span");r.className="max",r.textContent=e;var s=document.createElement("button");s.className="kds-snackbar-close",s.setAttribute("aria-label","Cerrar"),s.innerHTML='<i class="material-symbols-outlined">close</i>',s.onclick=function(){n(o)},o.appendChild(i),o.appendChild(r),o.appendChild(s),document.body.appendChild(o),setTimeout(function(){n(o)},a)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e(),window.Khipu||(window.Khipu={}),window.Khipu.showSnackbar=v,window.Khipu.closeModal=window.closeModal,window.Khipu.initBrandInner=a,window.Khipu.initSecureFooterInside=o,window.Khipu.initExpandToggle=i,window.Khipu.initCopyRow=r,window.Khipu.initCountdown=s,window.Khipu.initSegmentedTabs=l,window.Khipu.initCopyableTable=p,window.Khipu.initCopyAllBtn=f,window.Khipu.initInfoTip=m,window.Khipu.initBankModal=c,window.Khipu.initStickyInvoice=u,window.Khipu.initHideOnScroll=d,window.Khipu.initCardHeightTransition=t,window.showSnackbar=v}();
|
|
1
|
+
const _emptyNodeList=[],_weakElements=new WeakSet,isChrome=navigator.userAgent.includes("Chrome");navigator.userAgent.includes("Firefox"),navigator.userAgent.includes("Safari"),navigator.userAgent.includes("Windows");const isMac=navigator.userAgent.includes("Macintosh");navigator.userAgent.includes("Linux"),navigator.userAgent.includes("Android");const isIOS=/iPad|iPhone|iPod/.test(navigator.userAgent);function isDark(){return null==window?void 0:window.matchMedia("(prefers-color-scheme: dark)").matches}async function wait(e){await new Promise(t=>setTimeout(t,e))}function guid(){return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,e=>{const t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)})}function query(e,t){try{return"string"==typeof e?(t??document).querySelector(e):e}catch{return null}}function queryAll(e,t){try{return"string"==typeof e?(t??document).querySelectorAll(e):e??_emptyNodeList}catch{return _emptyNodeList}}function hasClass(e,t){return(null==e?void 0:e.classList.contains(t))??!1}function hasTag(e,t){var n;return(null==(n=null==e?void 0:e.tagName)?void 0:n.toLowerCase())===t}function hasType(e,t){var n;return(null==(n=null==e?void 0:e.type)?void 0:n.toLowerCase())===t}function addClass(e,t){if(e instanceof NodeList)for(let n=0;n<e.length;n++)e[n].classList.add(t);else null==e||e.classList.add(t)}function removeClass(e,t){if(e instanceof NodeList)for(let n=0;n<e.length;n++)e[n].classList.remove(t);else null==e||e.classList.remove(t)}function on(e,t,n,a=!0){(null==e?void 0:e.addEventListener)&&e.addEventListener(t,n,a)}function onWeak(e,t,n,a=!0){addWeakElement(e),on(e,t,n,a)}function off(e,t,n,a=!0){(null==e?void 0:e.removeEventListener)&&e.removeEventListener(t,n,a)}function insertBefore(e,t){var n;null==(n=null==t?void 0:t.parentNode)||n.insertBefore(e,t)}function prev(e){return null==e?void 0:e.previousElementSibling}function next(e){return null==e?void 0:e.nextElementSibling}function parent(e){return null==e?void 0:e.parentElement}function create(e){const t=document.createElement("div");for(let n=0,a=Object.keys(e),o=a.length;n<o;n++){const o=a[n],i=e[o];t.setAttribute(o,i)}return t}function blurActiveElement(){var e;null==(e=document.activeElement)||e.blur()}function queryAllDataUi(e){return queryAll('[data-ui="#'+e+'"]')}function queryDataUi(e){return query('[data-ui="#'+e+'"]')}function updateAllClickable(e){e.id&&hasClass(e,"page")&&(e=queryDataUi(e.id)??e);const t=parent(e);if(!hasClass(t,"tabs")&&!hasClass(t,"tabbed")&&!hasTag(t,"nav"))return;const n=queryAll("a",t);for(let e=0;e<n.length;e++)removeClass(n[e],"active");hasTag(e,"button")||hasClass(e,"button")||hasClass(e,"chip")||addClass(e,"active")}function addWeakElement(e){_weakElements.has(e)||_weakElements.add(e)}function rootSizeInPixels(){const e=getComputedStyle(document.documentElement).getPropertyValue("--size")||"16px";return e.includes("%")?16*parseInt(e)/100:e.includes("em")?16*parseInt(e):parseInt(e)}function updatePlaceholder(e){e.placeholder||(e.placeholder=" ")}function onClickLabel(e){const t=query("input:not([type=file], [type=checkbox], [type=radio]), select, textarea",parent(e.currentTarget));t&&t.focus()}function onFocusInput(e){updateInput(e.currentTarget)}function onBlurInput(e){updateInput(e.currentTarget)}function onChangeFile(e){updateFile(e.currentTarget)}function onChangeColor(e){updateColor(e.currentTarget)}function onKeydownFile(e){updateFile(e.currentTarget,e)}function onKeydownColor(e){updateColor(e.currentTarget,e)}function onPasswordIconClick(e){var t;const n=e.currentTarget,a=query("input",parent(n));a&&(null==(t=n.textContent)?void 0:t.includes("visibility"))&&("password"===a.type?(a.type="text",n.textContent="visibility_off"):(a.type="password",n.textContent="visibility"))}function onInputTextarea(e){updateTextarea(e.currentTarget)}function updateAllLabels(){const e=queryAll(".field > label");for(let t=0;t<e.length;t++)onWeak(e[t],"click",onClickLabel)}function updateAllInputs(){const e=queryAll(".field > input:not([type=file], [type=color], [type=range])");for(let t=0;t<e.length;t++)onWeak(e[t],"focus",onFocusInput),onWeak(e[t],"blur",onBlurInput),updateInput(e[t])}function updateAllSelects(){const e=queryAll(".field > select");for(let t=0;t<e.length;t++)onWeak(e[t],"focus",onFocusInput),onWeak(e[t],"blur",onBlurInput)}function updateAllFiles(){const e=queryAll(".field > input[type=file]");for(let t=0;t<e.length;t++)onWeak(e[t],"change",onChangeFile),updateFile(e[t])}function updateAllColors(){const e=queryAll(".field > input[type=color]");for(let t=0;t<e.length;t++)onWeak(e[t],"change",onChangeColor),updateColor(e[t])}function updateAllTextareas(){const e=queryAll(".field > textarea");for(let t=0;t<e.length;t++)onWeak(e[t],"focus",onFocusInput),onWeak(e[t],"blur",onBlurInput),updatePlaceholder(e[t]),(!isChrome||isMac||isIOS)&&(onWeak(e[t],"input",onInputTextarea),updateTextarea(e[t]))}function updateAllPasswordIcons(){const e=queryAll(".field:has(> input[type=password]) > i, a");for(let t=0;t<e.length;t++)onWeak(e[t],"click",onPasswordIconClick)}function updateInput(e){hasType(e,"number")&&!e.value&&(e.value=""),updatePlaceholder(e)}function updateFile(e,t){if("Enter"===(null==t?void 0:t.key)){const t=prev(e);if(!hasType(t,"file"))return;return void t.click()}const n=next(e);hasType(n,"text")&&(n.value=e.files?Array.from(e.files).map(e=>e.name).join(", "):"",n.readOnly=!0,onWeak(n,"keydown",onKeydownFile,!1),updateInput(n))}function updateColor(e,t){if("Enter"===(null==t?void 0:t.key)){const t=prev(e);if(!hasType(t,"color"))return;return void t.click()}const n=next(e);hasType(n,"text")&&(n.readOnly=!0,n.value=e.value,onWeak(n,"keydown",onKeydownColor,!1),updateInput(n))}function updateTextarea(e){if(updatePlaceholder(e),e.hasAttribute("rows"))return;const t=rootSizeInPixels();e.style.blockSize="auto",e.style.blockSize=e.scrollHeight-t+"px"}function updateAllFields(){updateAllLabels(),updateAllInputs(),updateAllSelects(),updateAllFiles(),updateAllColors(),updateAllTextareas(),updateAllPasswordIcons()}function onInputDocument$1(e){const t=e.target;(hasTag(t,"input")||hasTag(t,"select"))&&("range"===t.type?(t.focus(),updateRange(t)):updateAllRanges())}function onChangeInput(e){if(!window.matchMedia("(pointer: coarse)").matches)return;e.target.blur()}function updateAllRanges(){const e=document.body,t=queryAll(".slider > input[type=range]");t.length?on(e,"input",onInputDocument$1,!1):off(e,"input",onInputDocument$1,!1);for(let e=0;e<t.length;e++)updateRange(t[e])}function updateRange(e){onWeak(e,"change",onChangeInput);const t=parent(e),n=query("span",t),a=queryAll("input",t);if(!a.length||!n)return;const o=rootSizeInPixels(),i=hasClass(t,"max")?0:.25*o*100/a[0].offsetWidth,r=[],s=[];for(let e=0,t=a.length;e<t;e++){const t=parseFloat(a[e].min)||0,n=parseFloat(a[e].max)||100,o=parseFloat(a[e].value)||0,l=100*(o-t)/(n-t),c=i/2-i*l/100;r.push(l+c),s.push(o)}let l=r[0],c=0,u=100-c-l,d=s[0],p=s[1]||0;a.length>1&&(l=Math.abs(r[1]-r[0]),c=r[1]>r[0]?r[0]:r[1],u=100-c-l,p>d&&(d=s[1]||0,p=s[0])),requestAnimationFrame(()=>t.style.cssText=`--_start: ${c}%; --_end: ${u}%; --_value1: '${d}'; --_value2: '${p}';`)}function updateAllSliders(){updateAllRanges()}const _lastTheme={light:"",dark:""};function getMode(){var e;return(null==(e=null==document?void 0:document.body)?void 0:e.classList.contains("dark"))?"dark":"light"}function lastTheme(){if(_lastTheme.light&&_lastTheme.dark)return _lastTheme;const e=document.body,t=document.createElement("body");t.className="light",e.appendChild(t);const n=document.createElement("body");n.className="dark",e.appendChild(n);const a=getComputedStyle(t),o=getComputedStyle(n),i=["--primary","--on-primary","--primary-container","--on-primary-container","--secondary","--on-secondary","--secondary-container","--on-secondary-container","--tertiary","--on-tertiary","--tertiary-container","--on-tertiary-container","--error","--on-error","--error-container","--on-error-container","--background","--on-background","--surface","--on-surface","--surface-variant","--on-surface-variant","--outline","--outline-variant","--shadow","--scrim","--inverse-surface","--inverse-on-surface","--inverse-primary","--surface-dim","--surface-bright","--surface-container-lowest","--surface-container-low","--surface-container","--surface-container-high","--surface-container-highest"];for(let e=0,t=i.length;e<t;e++)_lastTheme.light+=i[e]+":"+a.getPropertyValue(i[e])+";",_lastTheme.dark+=i[e]+":"+o.getPropertyValue(i[e])+";";return e.removeChild(t),e.removeChild(n),_lastTheme}async function updateTheme(e){const t=globalThis,n=document.body;return e&&t.materialDynamicColors?e.light&&e.dark?(_lastTheme.light=e.light,_lastTheme.dark=e.dark,n.setAttribute("style",e[getMode()]),e):t.materialDynamicColors(e).then(e=>{const t=e=>{let t="";for(let n=0,a=Object.keys(e),o=a.length;n<o;n++){const o=a[n],i=e[o];t+="--"+o.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()+":"+i+";"}return t};return _lastTheme.light=t(e.light),_lastTheme.dark=t(e.dark),n.setAttribute("style",_lastTheme[getMode()]),_lastTheme}):lastTheme()}function updateMode(e){const t=globalThis,n=document.body;if(!n)return e;if(!e)return getMode();"auto"===e&&(e=isDark()?"dark":"light"),n.classList.remove("light","dark"),n.classList.add(e);const a="light"===e?_lastTheme.light:_lastTheme.dark;return t.materialDynamicColors&&n.setAttribute("style",a),getMode()}const _dialogs=[];function onKeydownDialog(e){if("Escape"===e.key){const t=e.currentTarget;updateDialog(t,t)}}function focusOnDialogOrElement(e){(query("[autofocus]",e)??e).focus()}function closeDialog(e,t){removeClass(queryAllDataUi(e.id),"active"),removeClass(e,"active"),removeClass(t,"active"),e.close(),_dialogs.pop();const n=_dialogs[_dialogs.length-1];n&&n.focus()}async function openDialog(e,t,n,a){hasTag(a,"button")||hasClass(a,"button")||hasClass(a,"chip")||addClass(a,"active"),addClass(t,"active"),addClass(e,"active"),n?e.showModal():e.show(),await wait(90),n||on(e,"keydown",onKeydownDialog,!1),_dialogs.push(e),focusOnDialogOrElement(e)}function onClickOverlay(e){const t=e.currentTarget,n=next(t);hasTag(n,"dialog")&&closeDialog(n,t)}async function updateDialog(e,t){blurActiveElement();let n=prev(t);const a=hasClass(t,"active")||t.open,o=hasClass(t,"modal");o||off(t,"keydown",onKeydownDialog,!1),hasClass(n,"overlay")||(n=create({class:"overlay"}),insertBefore(n,t),await wait(90)),o||onWeak(n,"click",onClickOverlay,!1),a?closeDialog(t,n):openDialog(t,n,o,e)}let _timeoutMenu,_timeoutSnackbar;function onClickDocument(e){off(document.body,"click",onClickDocument);const t=e.target,n=queryAll("menu.active");for(let a=0;a<n.length;a++)updateMenu(t,n[a],e)}function focusOnMenuOrInput(e){setTimeout(()=>{const t=query(".field > input",e);t?t.focus():e.focus()},90)}function updateMenu(e,t,n){_timeoutMenu&&clearTimeout(_timeoutMenu),_timeoutMenu=setTimeout(()=>{on(document.body,"click",onClickDocument),hasTag(document.activeElement,"input")||blurActiveElement();const a=hasClass(t,"active"),o=(null==n?void 0:n.target)===e,i=!!e.closest("menu");!a&&i||a&&o?removeClass(t,"active"):(removeClass(queryAll("menu.active"),"active"),addClass(t,"active"),focusOnMenuOrInput(t))},90)}function onClickSnackbar(e){removeClass(e.currentTarget,"active"),_timeoutSnackbar&&clearTimeout(_timeoutSnackbar)}function updateSnackbar(e,t){blurActiveElement();const n=queryAll(".snackbar.active");for(let e=0;e<n.length;e++)removeClass(n[e],"active");addClass(e,"active"),onWeak(e,"click",onClickSnackbar),_timeoutSnackbar&&clearTimeout(_timeoutSnackbar),-1!==t&&(_timeoutSnackbar=setTimeout(()=>{removeClass(e,"active")},t??6e3))}function updatePage(e){const t=parent(e);t&&removeClass(queryAll(":scope > .page",t),"active"),addClass(e,"active")}function onMousedownRipple(e){updateRipple(e)}function onKeydownRipple(e){" "===(null==e?void 0:e.key)&&updateRipple(e)}function updateRipple(e){const t=e instanceof MouseEvent,n=e.currentTarget,a=n.getBoundingClientRect(),o=Math.max(a.width,a.height),i=o/2,r=t?e.clientX-a.left-i:a.width/2-i,s=t?e.clientY-a.top-i:a.height/2-i,l=document.createElement("div");l.className="ripple-js";const c=document.createElement("div");c.style.inlineSize=c.style.blockSize=`${o}px`,c.style.left=`${r}px`,c.style.top=`${s}px`,onWeak(c,"animationend",()=>{l.remove()}),l.appendChild(c),n.appendChild(l)}function updateAllRipples(){const e=queryAll(".slow-ripple, .ripple, .fast-ripple");for(let t=0;t<e.length;t++)onWeak(e[t],"mousedown",onMousedownRipple),onWeak(e[t],"keydown",onKeydownRipple)}function onInputDocument(e){const t=e.target;hasTag(t,"progress")?updateProgress(t):updateAllProgress()}function updateProgress(e){requestAnimationFrame(()=>{if(e.hasAttribute("value")||e.hasAttribute("max"))e.style.setProperty("--_value",String(e.value));else{const t=hasClass(e,"circle")?"50":"100";e.style.setProperty("--_value",t),e.setAttribute("value",t),e.setAttribute("max","100"),e.classList.add("indeterminate")}})}function updateAllProgress(){if(isChrome&&!isMac&&!isIOS)return;const e=document.body,t=queryAll("progress");t.length?on(e,"input",onInputDocument,!1):off(e,"input",onInputDocument,!1);for(let e=0;e<t.length;e++)updateProgress(t[e])}const _context=globalThis;let _timeoutMutation,_mutation;function onMutation(){_timeoutMutation&&clearTimeout(_timeoutMutation),_timeoutMutation=setTimeout(async()=>await _ui(),180)}async function run(e,t,n,a){if(t||(t=query(e.getAttribute("data-ui"))))if(updateAllClickable(e),hasTag(t,"dialog"))requestAnimationFrame(()=>updateDialog(e,t));else if(hasTag(t,"menu"))requestAnimationFrame(()=>updateMenu(e,t,a));else if(hasClass(t,"snackbar"))requestAnimationFrame(()=>updateSnackbar(t,n));else{if(!hasClass(t,"page"))return hasClass(t,"active")?(removeClass(e,"active"),void removeClass(t,"active")):void addClass(t,"active");requestAnimationFrame(()=>updatePage(t))}else e.classList.toggle("active")}function onClickElement(e){run(e.currentTarget,null,null,e)}function onKeydownElement(e){"Enter"===e.key&&run(e.currentTarget,null,null,e)}function setup(){_context.ui||_mutation||!_context.MutationObserver||(_mutation=new MutationObserver(onMutation),_mutation.observe(document.body,{childList:!0,subtree:!0}),onMutation())}function updateAllDataUis(){const e=queryAll("[data-ui]");for(let t=0,n=e.length;t<n;t++)onWeak(e[t],"click",onClickElement),hasTag(e[t],"a")&&!e[t].getAttribute("href")&&onWeak(e[t],"keydown",onKeydownElement)}function _ui(e,t){if(e){if("setup"===e)return void setup();if("guid"===e)return guid();if("mode"===e)return updateMode(t);if("theme"===e)return updateTheme(t);const n=query(e);if(!n)return;run(n,n,t)}updateAllDataUis(),updateAllFields(),updateAllRipples(),updateAllSliders(),updateAllProgress()}function start(){var e;if(_context.ui)return;const t=null==(e=_context.document)?void 0:e.body;!t||t.classList.contains("dark")||t.classList.contains("light")||updateMode("auto"),setup(),_context.ui=_ui}start();const ui=_context.ui;!function(e){"use strict";const t={init:function(e={}){const t={sidebarSelector:e.sidebarSelector||".kds-sidebar"},n=document.querySelector(t.sidebarSelector);n?(!function(e){if(!e)return;const t=e.querySelector(".kds-sidebar-header"),n=e.querySelector(".kds-sidebar-header-dropdown");if(!t||!n)return;t.addEventListener("click",function(e){e.stopPropagation(),n.classList.toggle("kds-dropdown-open");const a=t.querySelector(".kds-sidebar-dropdown-icon");a&&(a.style.transform=n.classList.contains("kds-dropdown-open")?"rotate(180deg)":"rotate(0deg)")}),document.addEventListener("click",function(a){if(!e.contains(a.target)){n.classList.remove("kds-dropdown-open");const e=t.querySelector(".kds-sidebar-dropdown-icon");e&&(e.style.transform="rotate(0deg)")}}),n.querySelectorAll("a").forEach(e=>{e.addEventListener("click",function(){n.classList.remove("kds-dropdown-open");const e=t.querySelector(".kds-sidebar-dropdown-icon");e&&(e.style.transform="rotate(0deg)")})})}(n),function(e){if(!e)return;const t=e.querySelectorAll(".kds-sidebar-nav-item");t.forEach(n=>{n.addEventListener("click",function(n){"#"===this.getAttribute("href")&&n.preventDefault(),t.forEach(e=>{e.classList.remove("active")}),this.classList.add("active");const a=new CustomEvent("kds-sidebar-nav-change",{detail:{item:this,text:this.querySelector("span")?.textContent||""},bubbles:!0});e.dispatchEvent(a)})})}(n),function(){const e=document.querySelector(".kds-hamburger-btn"),t=document.querySelector(".kds-sidebar-close-btn"),n=document.querySelector(".kds-sidebar");e&&n&&(e.addEventListener("click",function(){n.classList.toggle("kds-sidebar-open")}),t&&t.addEventListener("click",function(){n.classList.remove("kds-sidebar-open")}),document.addEventListener("keydown",function(e){"Escape"===e.key&&n.classList.contains("kds-sidebar-open")&&n.classList.remove("kds-sidebar-open")}))}(),console.log("[Khipu Sidebar] Initialized successfully")):console.warn("[Khipu Sidebar] Sidebar not found with selector:",t.sidebarSelector)}};"function"==typeof define&&define.amd?define(function(){return t}):"object"==typeof module&&module.exports?module.exports=t:e.KhipuSidebar=t}("undefined"!=typeof window?window:this),function(){"use strict";function e(){console.log("Initializing Khipu Material Design components..."),void 0!==window.KhipuSidebar&&window.KhipuSidebar.init(),function(){const e=document.getElementById("menu-toggle"),t=document.getElementById("material-sidenav");e&&t&&(e.addEventListener("click",function(){t.classList.toggle("active")}),document.addEventListener("click",function(n){if(t.classList.contains("active")){t.contains(n.target)||e.contains(n.target)||t.classList.remove("active")}}))}(),document.querySelectorAll('.snackbar[data-auto-dismiss="true"]').forEach(function(e){var n=e.querySelector("span");n&&n.classList.add("max");var a=document.createElement("button");a.className="kds-snackbar-close",a.setAttribute("aria-label","Cerrar"),a.innerHTML='<i class="material-symbols-outlined">close</i>',a.onclick=function(){t(e)},e.appendChild(a),setTimeout(function(){t(e)},5e3)}),window.closeModal=function(e){const t=document.getElementById(e);t&&t.classList.remove("active")},n(),a(),o(),i(),d(),p(),f(),r(),s(),c(),u(),l(),function(e){e=e||document;var t=.72,n=16,a=128,o=.02;function i(e,t){if(e){var i=new Image;i.crossOrigin="anonymous",i.onload=function(){try{var e=document.createElement("canvas");e.width=n,e.height=n;var r=e.getContext("2d");if(!r)return void t(null);r.drawImage(i,0,0,n,n);for(var s=r.getImageData(0,0,n,n).data,l=0,c=0,u=0;u<s.length;u+=4)s[u+3]<a||(l+=(.2126*s[u]+.7152*s[u+1]+.0722*s[u+2])/255,c++);if(c<n*n*o)return void t(null);t(l/c)}catch(e){t(null)}},i.onerror=function(){t(null)},i.src=e}else t(null)}e.querySelectorAll(".kds-invoice-merchant").forEach(function(e){var n=e.querySelector("img");if(n){var a=e.style.background;e.style.background="",e.classList.add("kds-invoice-merchant-neutral"),n.addEventListener("error",function(){e.classList.remove("kds-invoice-merchant-neutral","dark"),e.style.background=a}),i(n.getAttribute("src"),function(n){null!=n&&n>t&&e.classList.contains("kds-invoice-merchant-neutral")&&e.classList.add("dark")})}})}(),console.log("Material Design initialization complete!")}function t(e){e.classList.remove("active"),setTimeout(function(){e.remove()},300)}function n(e){(e=e||document).querySelectorAll(".kds-invoice-sticky").forEach(function(e){if(!e.querySelector(".kds-brand-inner")){var t=e.closest(".kds-screen")||e.parentElement,n=t?t.querySelector(".kds-brand-row"):null,a=n?n.querySelector("svg, img"):null;if(a){var o=e.querySelector(".kds-invoice-header"),i=o?o.firstElementChild:null;if(i){var r=document.createElement("div");r.className="kds-brand-inner",r.appendChild(a.cloneNode(!0)),i.insertBefore(r,i.firstChild)}}}})}function a(e){(e=e||document).querySelectorAll(".kds-screen").forEach(function(e){var t=e.querySelector(".kds-secure-footer");if(t){var n=e.querySelectorAll(".kds-card-elevated:not(.kds-invoice-sticky)");if(n.length){var a=n[n.length-1];t.classList.add("inside"),a.appendChild(t)}}})}function o(e){(e=e||document).addEventListener("click",function(e){var t=e.target.closest("[data-expand-toggle]");if(t){var n="true"===t.getAttribute("aria-expanded");t.setAttribute("aria-expanded",String(!n));var a=t.getAttribute("aria-controls"),o=a?document.getElementById(a):t.parentElement.querySelector("[data-expand-panel]");o&&(n?(o.classList.remove("open"),o.style.maxHeight=""):(o.classList.add("open"),o.style.maxHeight=o.scrollHeight+"px"))}})}function i(e){(e=e||document).addEventListener("click",function(e){var t=e.target.closest(".kds-copy-row[data-copy]");if(t)navigator.clipboard.writeText(t.dataset.copy).then(function(){t.classList.add("copied"),setTimeout(function(){t.classList.remove("copied")},1200)});else{var n=e.target.closest(".kds-copy-all[data-copy-all]");if(n){var a=n.dataset.copyAll,o=a?document.querySelector(a):n.closest(".kds-copy-header").nextElementSibling;if(!o)return;var i=o.querySelectorAll("[data-copy]"),r=[];i.forEach(function(e){r.push(e.dataset.copy)}),navigator.clipboard.writeText(r.join("\n")).then(function(){i.forEach(function(e){e.classList.add("copied"),setTimeout(function(){e.classList.remove("copied")},1200)})})}}})}function r(e){(e=e||document).querySelectorAll(".kds-countdown[data-deadline]").forEach(function(e){var t=new Date(e.dataset.deadline).getTime(),n=e.dataset.serverNow?new Date(e.dataset.serverNow).getTime():Date.now(),a=Date.now()-n,o=e.querySelector("[data-h]"),i=e.querySelector("[data-m]"),r=e.querySelector("[data-s]");function s(e){return e<10?"0"+e:String(e)}function l(){var n=Date.now()-a,l=Math.max(0,t-n),u=Math.floor(l/1e3),d=Math.floor(u/3600),p=Math.floor(u%3600/60),f=u%60;o&&(o.textContent=s(d)),i&&(i.textContent=s(p)),r&&(r.textContent=s(f)),l<3e5&&e.classList.add("urgent"),l<=0&&(clearInterval(c),e.dispatchEvent(new CustomEvent("kds:countdown:expired",{bubbles:!0})))}l();var c=setInterval(l,1e3)})}function s(e){(e=e||document).querySelectorAll(".kds-segmented-tabs").forEach(function(e){var t=e.querySelectorAll("button");e.style.setProperty("--_tab-count",t.length);var n=0;t.forEach(function(e,t){(e.classList.contains("active")||"true"===e.getAttribute("aria-selected"))&&(n=t)}),e.style.setProperty("--_active-idx",n);var a=e.parentElement;a&&a.querySelectorAll("[data-kds-tab-panel]").forEach(function(e,t){e.hidden=t!==n})}),e.addEventListener("click",function(e){var t=e.target.closest(".kds-segmented-tabs button");if(t){var n=t.closest(".kds-segmented-tabs"),a=n.querySelectorAll("button");a.forEach(function(e){e.classList.remove("active"),e.setAttribute("aria-selected","false")}),t.classList.add("active"),t.setAttribute("aria-selected","true");var o=Array.prototype.indexOf.call(a,t);n.style.setProperty("--_active-idx",o);var i=n.parentElement;i&&i.querySelectorAll("[data-kds-tab-panel]").forEach(function(e,t){e.hidden=t!==o}),n.dispatchEvent(new CustomEvent("kds:tab:change",{bubbles:!0,detail:{index:o,button:t}}))}})}function l(e){var t=(e=e||document).querySelector("#bankModal"),n=e.querySelector("#bankSearch"),a=e.querySelector("#bankModalList"),o=e.querySelector("#bankNoResults");function i(e){if(a){var t=e.toLowerCase().trim(),n=a.querySelectorAll(".kds-bank-row"),i=0;n.forEach(function(e){var n=e.querySelector(".kds-bank-row-name");if(n){var a=n.textContent.toLowerCase(),o=!t||-1!==a.indexOf(t);e.style.display=o?"":"none",o&&i++}}),o&&o.classList.toggle("visible",0===i)}}t&&(e.addEventListener("click",function(e){e.target.closest("[data-open-bank-modal]")&&(t.classList.add("open"),n&&(n.value="",n.focus()),i(""))}),e.addEventListener("click",function(e){e.target.closest("[data-close-bank-modal]")&&t.classList.remove("open")}),a&&a.addEventListener("click",function(e){var n=e.target.closest(".kds-bank-row");if(n){var a=n.dataset.bankId||n.dataset.bank||"",o=n.querySelector(".kds-bank-row-name");t.dispatchEvent(new CustomEvent("kds:bank:selected",{bubbles:!0,detail:{id:a,name:o?o.textContent:"",element:n}})),t.classList.remove("open")}}),n&&n.addEventListener("input",function(e){i(e.target.value)}),window.Khipu||(window.Khipu={}),window.Khipu.filterBanks=i)}function c(e){e=e||document;var t=!1;function n(){return window.innerWidth<768}function a(){var a=e.querySelector(".kds-screen.active");if(a&&a.querySelector(".kds-invoice-sticky"))return n()?void(t||(t=!0,requestAnimationFrame(function(){t=!1;var n=e.querySelector(".kds-screen.active");if(n){var a=n.querySelector(".kds-invoice-sticky");if(a){var o=window.scrollY||window.pageYOffset,i=Math.min(Math.max((o-0)/20,0),1);if(!n.style.getPropertyValue("--collapse-collapsible-h")){var r=a.querySelector(".kds-invoice-collapsible");r&&n.style.setProperty("--collapse-collapsible-h",r.offsetHeight+"px")}n.style.setProperty("--collapse-progress",i),a.classList.toggle("is-collapsed",i>=1),i>0&&a.querySelectorAll('[data-expand-toggle][aria-expanded="true"]').forEach(function(e){e.setAttribute("aria-expanded","false");var t=e.getAttribute("aria-controls"),n=t?document.getElementById(t):null;n&&n.classList.remove("open")})}}}))):(a.style.removeProperty("--collapse-progress"),void a.style.removeProperty("--collapse-collapsible-h"))}window.addEventListener("resize",function(){n()||(e.querySelectorAll(".kds-screen").forEach(function(e){e.style.removeProperty("--collapse-progress"),e.style.removeProperty("--collapse-collapsible-h")}),e.querySelectorAll(".kds-invoice-sticky.is-collapsed").forEach(function(e){e.classList.remove("is-collapsed")}))}),window.addEventListener("scroll",a,{passive:!0}),a()}function u(e){var t=(e=e||document).querySelectorAll("[data-hide-on-scroll]");if(t.length){var n=0,a=!1,o=new Map;window.addEventListener("scroll",r,{passive:!0}),window.addEventListener("resize",r),window.addEventListener("message",function(e){e.data&&"VIEWPORT_OFFSET"===e.data.type&&(n=Math.max(0,e.data.offsetTop||0),r())}),i()}function i(){a=!1;var e=Math.max(window.scrollY||window.pageYOffset||0,n);t.forEach(function(t){var n=parseInt(t.getAttribute("data-hide-threshold"),10)||8,a=parseInt(t.getAttribute("data-hide-top-offset"),10)||0,i=t.getAttribute("data-hide-class")||"kds-fab--hidden",r=o.has(t)?o.get(t):e;if(e<=a)return t.classList.remove(i),void o.set(t,e);var s=e-r;Math.abs(s)<n||(t.classList.toggle(i,s>0),o.set(t,e))})}function r(){a||(a=!0,requestAnimationFrame(i))}}function d(e){(e=e||document).addEventListener("click",function(e){var t=e.target.closest(".kds-copyable-table-row[data-copy]");t&&navigator.clipboard.writeText(t.dataset.copy).then(function(){t.classList.add("copied"),setTimeout(function(){t.classList.remove("copied")},1200)})})}function p(e){(e=e||document).addEventListener("click",function(e){var t=e.target.closest(".kds-copy-all-btn[data-copy-all]");if(t){var n=t.dataset.copyAll,a=n?document.querySelector(n):t.previousElementSibling;if(a){var o=a.querySelectorAll(".kds-copyable-table-row[data-copy]"),i=[];o.forEach(function(e){var t=e.querySelector(".kds-key"),n=e.dataset.copy;t?i.push(t.textContent.trim()+": "+n):i.push(n)}),navigator.clipboard.writeText(i.join("\n")).then(function(){t.classList.add("copied");var e=t.querySelector("span:not(.kds-icon)"),n=e?e.textContent:"";e&&(e.textContent="Copiado"),o.forEach(function(e){e.classList.add("copied")}),setTimeout(function(){t.classList.remove("copied"),e&&(e.textContent=n),o.forEach(function(e){e.classList.remove("copied")})},1400)})}}})}function f(e){(e=e||document).querySelectorAll(".kds-info-tip[data-tip]").forEach(function(e){if(!e.querySelector(".kds-tip-bubble")){var t=document.createElement("span");t.className="kds-tip-bubble",t.setAttribute("role","tooltip"),t.textContent=e.dataset.tip,e.appendChild(t)}}),e.addEventListener("click",function(e){var t=e.target.closest(".kds-info-tip");if(t){e.preventDefault(),e.stopPropagation();var n="true"===t.getAttribute("aria-expanded");return document.querySelectorAll('.kds-info-tip[aria-expanded="true"]').forEach(function(e){e.setAttribute("aria-expanded","false")}),void t.setAttribute("aria-expanded",String(!n))}document.querySelectorAll('.kds-info-tip[aria-expanded="true"]').forEach(function(e){e.setAttribute("aria-expanded","false")})})}function m(e,n,a){n=n||"info",a=a||5e3;var o=document.createElement("div");o.className="snackbar active "+n,o.setAttribute("data-auto-dismiss","true"),o.style.setProperty("--kds-snackbar-duration",a+"ms");var i=document.createElement("i");i.className="material-symbols-outlined",i.textContent="success"===n?"check_circle":"error"===n?"error":"info";var r=document.createElement("span");r.className="max",r.textContent=e;var s=document.createElement("button");s.className="kds-snackbar-close",s.setAttribute("aria-label","Cerrar"),s.innerHTML='<i class="material-symbols-outlined">close</i>',s.onclick=function(){t(o)},o.appendChild(i),o.appendChild(r),o.appendChild(s),document.body.appendChild(o),setTimeout(function(){t(o)},a)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e(),window.Khipu||(window.Khipu={}),window.Khipu.showSnackbar=m,window.Khipu.closeModal=window.closeModal,window.Khipu.initBrandInner=n,window.Khipu.initSecureFooterInside=a,window.Khipu.initExpandToggle=o,window.Khipu.initCopyRow=i,window.Khipu.initCountdown=r,window.Khipu.initSegmentedTabs=s,window.Khipu.initCopyableTable=d,window.Khipu.initCopyAllBtn=p,window.Khipu.initInfoTip=f,window.Khipu.initBankModal=l,window.Khipu.initStickyInvoice=c,window.Khipu.initHideOnScroll=u,window.showSnackbar=m}();
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
*
|
|
16
16
|
* AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
|
|
17
17
|
* Source: design-system/src/tokens/tokens.json
|
|
18
|
-
* Generated: 2026-
|
|
18
|
+
* Generated: 2026-09-04T16:12:10.133Z
|
|
19
19
|
*
|
|
20
20
|
* To regenerate:
|
|
21
21
|
* cd design-system && npm run tokens:generate
|
|
@@ -399,13 +399,13 @@
|
|
|
399
399
|
/* ============================================================================
|
|
400
400
|
DARK MODE COLOR TOKENS
|
|
401
401
|
Override only color variables; everything else inherits from :root.
|
|
402
|
-
Activated via [data-theme="dark"] on <html>, <body>, or a wrapper
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
402
|
+
Activated ONLY via [data-theme="dark"] on <html>, <body>, or a wrapper.
|
|
403
|
+
body.dark is deliberately NOT a trigger: BeerCSS adds that class on its
|
|
404
|
+
own when the OS reports a dark preference, so honouring it turns dark on
|
|
405
|
+
for consumers that never opted in. Dark stays opt-in until an app sets
|
|
406
|
+
data-theme explicitly.
|
|
406
407
|
============================================================================ */
|
|
407
408
|
|
|
408
|
-
.kds-theme-root.dark,
|
|
409
409
|
.kds-theme-root [data-theme="dark"] {
|
|
410
410
|
|
|
411
411
|
/* Primary palette - Khipu brand */
|
|
@@ -881,11 +881,10 @@
|
|
|
881
881
|
values so selected states / rows / hovers adapt. Additive: the light
|
|
882
882
|
:root / body.light values above are unchanged. Tokens already defined as
|
|
883
883
|
var() refs (warning-soft, danger-soft) adapt on their own and are omitted.
|
|
884
|
-
body.dark is
|
|
885
|
-
|
|
886
|
-
|
|
884
|
+
body.dark is deliberately NOT a trigger: BeerCSS adds that class on its own
|
|
885
|
+
when the OS reports a dark preference, so honouring it turns dark on for
|
|
886
|
+
consumers that never opted in. Dark stays opt-in via data-theme.
|
|
887
887
|
======================================== */
|
|
888
|
-
.kds-theme-root.dark,
|
|
889
888
|
.kds-theme-root [data-theme="dark"] {
|
|
890
889
|
--kds-color-primary-faint: #1E1030; /* dark brand-tinted subtle surface (selected rows/cards) */
|
|
891
890
|
--kds-color-info-soft: var(--kds-alert-info-bg); /* dark translucent blue */
|
|
@@ -919,7 +918,7 @@
|
|
|
919
918
|
opt-out for Chrome/WebView "Auto Dark Theme" on Android: without it, an
|
|
920
919
|
OS-dark device heuristically darkens SOME elements of a light page (mixed
|
|
921
920
|
light/dark rendering in production apps). Dark is reached only by an
|
|
922
|
-
explicit [data-theme="dark"]
|
|
921
|
+
explicit [data-theme="dark"] opt-in. */
|
|
923
922
|
.kds-theme-root,
|
|
924
923
|
.kds-theme-root,
|
|
925
924
|
.kds-theme-root {
|
|
@@ -938,8 +937,7 @@
|
|
|
938
937
|
}
|
|
939
938
|
|
|
940
939
|
/* Explicit dark theme: let native UI (form controls, scrollbars) render dark. */
|
|
941
|
-
.kds-theme-root [data-theme="dark"]
|
|
942
|
-
.kds-theme-root.dark {
|
|
940
|
+
.kds-theme-root [data-theme="dark"] {
|
|
943
941
|
color-scheme: dark;
|
|
944
942
|
}
|
|
945
943
|
|
|
@@ -1001,6 +999,20 @@
|
|
|
1001
999
|
background-color: transparent !important;
|
|
1002
1000
|
}
|
|
1003
1001
|
|
|
1002
|
+
/* Familia base del arbol del DS.
|
|
1003
|
+
BeerCSS la pone en `body { font-family: var(--font) }`, y `--font` es un alias
|
|
1004
|
+
declarado en :root. Una custom property se sustituye en el elemento que la declara,
|
|
1005
|
+
asi que ese alias se congela con la familia de :root: una marca que define
|
|
1006
|
+
--kds-font-family-primary mas abajo en el arbol no lo mueve, y el texto que solo
|
|
1007
|
+
hereda de body se queda con la familia por defecto.
|
|
1008
|
+
|
|
1009
|
+
Resolviendo el token aca, en la raiz del arbol del DS, hereda todo lo de adentro con
|
|
1010
|
+
la familia vigente en ese punto. Sin marca definida el valor es el mismo de siempre,
|
|
1011
|
+
asi que no cambia nada para quien no la configura. */
|
|
1012
|
+
.kds-theme-root .kds-theme-root {
|
|
1013
|
+
font-family: var(--kds-font-family-primary);
|
|
1014
|
+
}
|
|
1015
|
+
|
|
1004
1016
|
/* ========================================
|
|
1005
1017
|
TEXT UTILITIES OVERRIDE
|
|
1006
1018
|
Fix BeerCSS classes that use wrong color tokens
|
|
@@ -2458,12 +2470,21 @@
|
|
|
2458
2470
|
/* Llena y centra dentro de contenedores flex (pantalla de carga); en flujo
|
|
2459
2471
|
normal (contenedor no-flex) se reduce a su contenido. */
|
|
2460
2472
|
flex: 1 1 auto;
|
|
2461
|
-
/* Alto propio: el loader es contenido minimo por definicion, asi que sin esto la
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2473
|
+
/* Alto propio: el loader es contenido minimo por definicion, asi que sin esto la card
|
|
2474
|
+
queda del alto del spinner y se lee como un recorte. Va aca y no en la card para que
|
|
2475
|
+
el minimo aplique solo a la carga: el resto de las pantallas crece con su contenido.
|
|
2476
|
+
El valor de escritorio es moderado a proposito: el minimo de telefono (36rem) dejaba
|
|
2477
|
+
la card de la carga mucho mas alta que cualquier otra pantalla, y al entrar y salir
|
|
2478
|
+
del loader el widget crecia y volvia a encoger. */
|
|
2479
|
+
min-height: 18rem;
|
|
2480
|
+
}
|
|
2481
|
+
|
|
2482
|
+
/* En telefono la carga si ocupa el alto util de la pantalla: ahi la card va a ancho
|
|
2483
|
+
completo y un loader corto se lee como una franja perdida en el medio. */
|
|
2484
|
+
@media (max-width: 767px) {
|
|
2485
|
+
.kds-theme-root .kds-secure-loader {
|
|
2486
|
+
min-height: 36rem;
|
|
2487
|
+
}
|
|
2467
2488
|
}
|
|
2468
2489
|
|
|
2469
2490
|
.kds-theme-root .kds-secure-loader-text {
|
|
@@ -3273,12 +3294,32 @@
|
|
|
3273
3294
|
cursor: pointer;
|
|
3274
3295
|
}
|
|
3275
3296
|
|
|
3276
|
-
/* Checked state
|
|
3297
|
+
/* Checked state.
|
|
3298
|
+
accent-color aplica al input nativo, que BeerCSS deja con opacity 0: no se ve.
|
|
3299
|
+
Se mantiene igual por si algun consumidor no usa el markup de BeerCSS. */
|
|
3277
3300
|
.kds-theme-root label.checkbox input[type="checkbox"]:checked,
|
|
3278
3301
|
.kds-theme-root label.radio input[type="radio"]:checked {
|
|
3279
3302
|
accent-color: var(--kds-color-accent, var(--primary));
|
|
3280
3303
|
}
|
|
3281
3304
|
|
|
3305
|
+
/* El control que SI se ve lo dibuja BeerCSS como una ligadura de Material Symbols en
|
|
3306
|
+
`> span::before`, coloreada con var(--primary). Estas dos reglas reproducen sus
|
|
3307
|
+
selectores para que ese pseudo-elemento siga al rol accent.
|
|
3308
|
+
|
|
3309
|
+
Misma especificidad que el original y sin !important: este archivo va ultimo en el
|
|
3310
|
+
bundle, asi que gana por orden. El fallback deja el valor anterior intacto cuando la
|
|
3311
|
+
marca no define accent, que es el caso de todo consumidor actual.
|
|
3312
|
+
|
|
3313
|
+
No se toca `.switch`: es un control de encendido/apagado, no de seleccion, y el
|
|
3314
|
+
contrato de marca no lo incluye. */
|
|
3315
|
+
.kds-theme-root :is(.checkbox, .radio) > span::before {
|
|
3316
|
+
color: var(--kds-color-accent, var(--primary));
|
|
3317
|
+
}
|
|
3318
|
+
|
|
3319
|
+
.kds-theme-root :is(.checkbox, .radio) > input:checked + span::before, .kds-theme-root :is(.checkbox, .radio).icon > input:checked + span > i {
|
|
3320
|
+
color: var(--kds-color-accent, var(--primary));
|
|
3321
|
+
}
|
|
3322
|
+
|
|
3282
3323
|
/* Disabled state */
|
|
3283
3324
|
.kds-theme-root label.checkbox input[type="checkbox"]:disabled,
|
|
3284
3325
|
.kds-theme-root label.radio input[type="radio"]:disabled {
|
|
@@ -6280,13 +6321,39 @@
|
|
|
6280
6321
|
alto que el mark de Khipu. Sirve para <img> o un elemento con .kds-psp-mark. */
|
|
6281
6322
|
.kds-theme-root .kds-secure-footer img,
|
|
6282
6323
|
.kds-theme-root .kds-secure-footer .kds-psp-mark {
|
|
6283
|
-
height: 11px;
|
|
6284
6324
|
width: auto;
|
|
6285
6325
|
flex: 0 0 auto;
|
|
6286
6326
|
display: block;
|
|
6287
6327
|
object-fit: contain;
|
|
6288
6328
|
}
|
|
6289
6329
|
|
|
6330
|
+
/* Logo del PSP: dos perillas, las dos calibradas contra el asset real que sube un PSP
|
|
6331
|
+
hoy (klap.png, 60x30, con 2px de aire transparente arriba y abajo).
|
|
6332
|
+
|
|
6333
|
+
Se nivela por LINEA DE BASE, no por caja ni por borde inferior de la tinta: los dos
|
|
6334
|
+
wordmarks tienen descendente -la "p" de Khipu baja un 20% de su caja- asi que igualar
|
|
6335
|
+
los bordes de abajo deja al logo del PSP flotando sobre la linea de Khipu.
|
|
6336
|
+
|
|
6337
|
+
- --kds-psp-mark-height: el alto de la caja. El ojo lee la tinta, no la caja, y el
|
|
6338
|
+
aire del PNG se come parte del alto: a 11px la tinta de klap medía 9.5px contra los
|
|
6339
|
+
11px de Khipu y se veia mas chico. A 15px la tinta llega a 13px y se leen iguales.
|
|
6340
|
+
- --kds-psp-mark-top: cuanto baja para que su linea de base calce con la de Khipu.
|
|
6341
|
+
Va como valor y no como formula a proposito: depende del aire y de la anatomia del
|
|
6342
|
+
asset de cada PSP, y se termina de ajustar mirando la pantalla. */
|
|
6343
|
+
.kds-theme-root .kds-secure-footer {
|
|
6344
|
+
--kds-psp-mark-height: 15px;
|
|
6345
|
+
--kds-psp-mark-top: 1px;
|
|
6346
|
+
}
|
|
6347
|
+
|
|
6348
|
+
.kds-theme-root .kds-secure-footer img,
|
|
6349
|
+
.kds-theme-root .kds-secure-footer .kds-psp-mark {
|
|
6350
|
+
height: var(--kds-psp-mark-height);
|
|
6351
|
+
position: relative;
|
|
6352
|
+
top: var(--kds-psp-mark-top);
|
|
6353
|
+
}
|
|
6354
|
+
|
|
6355
|
+
|
|
6356
|
+
|
|
6290
6357
|
.kds-theme-root .kds-secure-footer-code {
|
|
6291
6358
|
color: var(--kds-color-text-hint);
|
|
6292
6359
|
}
|
|
@@ -6542,14 +6609,37 @@
|
|
|
6542
6609
|
color: var(--kds-color-success-main);
|
|
6543
6610
|
}
|
|
6544
6611
|
|
|
6545
|
-
/* Variant: pending (animated
|
|
6612
|
+
/* Variant: pending (animated spinner, sin icono interno).
|
|
6613
|
+
El acento sale de --kds-status-pending-accent, con el azul de info como
|
|
6614
|
+
fallback: el valor por defecto no cambia, y una pantalla puede pedir otro
|
|
6615
|
+
acento sin redefinir la regla ni recurrir a estilos inline. */
|
|
6546
6616
|
.kds-theme-root .kds-status-block[data-status="pending"] .kds-status-block-icon {
|
|
6547
6617
|
background: transparent;
|
|
6548
6618
|
border: 3px solid var(--kds-color-divider);
|
|
6549
|
-
border-top-color: var(--kds-color-info-main);
|
|
6619
|
+
border-top-color: var(--kds-status-pending-accent, var(--kds-color-info-main));
|
|
6550
6620
|
animation: kds-spin 1s linear infinite;
|
|
6551
6621
|
}
|
|
6552
6622
|
|
|
6623
|
+
/* Spinner neutro, para esperas que acompañan al contenido sin reclamar
|
|
6624
|
+
atención: el azul de info lee como un aviso y compite con la información
|
|
6625
|
+
de la pantalla. */
|
|
6626
|
+
.kds-theme-root .kds-status-block.kds-accent-neutral {
|
|
6627
|
+
--kds-status-pending-accent: var(--kds-color-text-primary);
|
|
6628
|
+
}
|
|
6629
|
+
|
|
6630
|
+
/* Spinner fino, para bandas de una línea donde el trazo de 3px pesa demasiado.
|
|
6631
|
+
El tamaño se pide por token y no por regla sobre el icono: así no compite en
|
|
6632
|
+
especificidad con `.kds-status-block.inline .kds-status-block-icon`, que
|
|
6633
|
+
marca igual y viene después. */
|
|
6634
|
+
.kds-theme-root .kds-status-block.kds-spinner-sm {
|
|
6635
|
+
--kds-status-icon-size: var(--kds-spacing-3);
|
|
6636
|
+
--kds-status-icon-size-sm: var(--kds-spacing-3);
|
|
6637
|
+
}
|
|
6638
|
+
|
|
6639
|
+
.kds-theme-root .kds-status-block.kds-spinner-sm .kds-status-block-icon {
|
|
6640
|
+
border-width: 2px;
|
|
6641
|
+
}
|
|
6642
|
+
|
|
6553
6643
|
/* Variant: warn */
|
|
6554
6644
|
.kds-theme-root .kds-status-block[data-status="warn"] .kds-status-block-icon {
|
|
6555
6645
|
background: var(--kds-color-warning-soft);
|
|
@@ -6593,6 +6683,31 @@
|
|
|
6593
6683
|
font-size: var(--kds-font-size-xl);
|
|
6594
6684
|
}
|
|
6595
6685
|
|
|
6686
|
+
/* Banda: el bloque de estado sobre una superficie sutil, para cuando acompaña
|
|
6687
|
+
al contenido en lugar de encabezar la pantalla. Va después de `.inline`
|
|
6688
|
+
porque marca igual en especificidad y necesita ganarle el padding. */
|
|
6689
|
+
.kds-theme-root .kds-status-block.kds-banded {
|
|
6690
|
+
/* 0.75rem = 12px, el valor que --kds-font-size-xs toma desde tablet. Va plano y no
|
|
6691
|
+
sigue la escala responsiva a proposito: a 11px el mensaje de espera se parte en dos
|
|
6692
|
+
lineas y el diseno lo quiere en una. Como custom property de la variante, siguiendo
|
|
6693
|
+
el patron de kds-spinner-sm con --kds-status-icon-size. */
|
|
6694
|
+
--kds-status-band-font-size: 0.75rem;
|
|
6695
|
+
background: var(--kds-color-background-muted);
|
|
6696
|
+
border-radius: var(--kds-radius-md);
|
|
6697
|
+
padding: var(--kds-spacing-1-5) var(--kds-spacing-2);
|
|
6698
|
+
}
|
|
6699
|
+
|
|
6700
|
+
/* La banda de espera lleva su propia tipografia, por spec de Figma: 11px en bold.
|
|
6701
|
+
Va scopeada a la variante y no a .kds-status-block-description, que la comparten
|
|
6702
|
+
los bloques de resultado, donde 11px seria ilegible. El color se deja en el token
|
|
6703
|
+
heredado: un #000 fijo se volveria invisible bajo modo oscuro, donde text-primary
|
|
6704
|
+
pasa a blanco. */
|
|
6705
|
+
.kds-theme-root .kds-status-block.kds-banded .kds-status-block-description {
|
|
6706
|
+
font-size: var(--kds-status-band-font-size);
|
|
6707
|
+
font-weight: var(--kds-font-weight-bold);
|
|
6708
|
+
line-height: normal;
|
|
6709
|
+
}
|
|
6710
|
+
|
|
6596
6711
|
@keyframes kds-spin {
|
|
6597
6712
|
to { transform: rotate(360deg); }
|
|
6598
6713
|
}
|
|
@@ -7990,6 +8105,36 @@
|
|
|
7990
8105
|
}
|
|
7991
8106
|
}
|
|
7992
8107
|
|
|
8108
|
+
/* Widget embebido: dentro de un iframe los media queries de ancho evalúan el viewport
|
|
8109
|
+
DEL IFRAME (~420px), no la pantalla, así que el flujo se ve siempre como mobile
|
|
8110
|
+
aunque el usuario esté en desktop — y el tope plano, pensado para cuando la card se
|
|
8111
|
+
pega al borde del teléfono, queda cortando una card que en realidad flota centrada.
|
|
8112
|
+
`hover`/`pointer` describen el dispositivo de entrada y no el viewport, así que
|
|
8113
|
+
sobreviven al iframe: con mouse las cards conservan las esquinas superiores. */
|
|
8114
|
+
@media (hover: hover) and (pointer: fine) {
|
|
8115
|
+
.kds-theme-root .kds-card-elevated.kds-invoice-sticky {
|
|
8116
|
+
border-radius: var(--kds-radius-card);
|
|
8117
|
+
/* El clip-path del colapso recorta con `round 0 0 R R` y eso PISA al
|
|
8118
|
+
border-radius: aunque la card declare las cuatro esquinas, el recorte las
|
|
8119
|
+
deja rectas arriba. Hay que redondearlas también acá o el fix no se ve. */
|
|
8120
|
+
clip-path: inset(
|
|
8121
|
+
0 0
|
|
8122
|
+
calc(
|
|
8123
|
+
var(--collapse-collapsible-h) * var(--collapse-progress)
|
|
8124
|
+
+ var(--kds-spacing-1) * var(--collapse-progress)
|
|
8125
|
+
)
|
|
8126
|
+
0
|
|
8127
|
+
round var(--kds-radius-card)
|
|
8128
|
+
);
|
|
8129
|
+
}
|
|
8130
|
+
|
|
8131
|
+
.kds-theme-root .kds-screen > .kds-card-elevated.kds-card-elevated--flush-top,
|
|
8132
|
+
.kds-theme-root .kds-card-elevated.kds-card-elevated--flush-top {
|
|
8133
|
+
border-top-left-radius: var(--kds-radius-card);
|
|
8134
|
+
border-top-right-radius: var(--kds-radius-card);
|
|
8135
|
+
}
|
|
8136
|
+
}
|
|
8137
|
+
|
|
7993
8138
|
/* Brand logo row (external, outside cards) */
|
|
7994
8139
|
.kds-theme-root .kds-brand-row {
|
|
7995
8140
|
padding: 0 var(--kds-spacing-0-5);
|