@khipu/design-system 0.2.0-alpha.83 → 0.2.0-alpha.85
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 +155 -6
- package/dist/beercss/khipu-beercss.js +63 -0
- 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 +155 -6
- package/dist/beercss/khipu-beercss.scoped.min.css +1 -1
- package/dist/beercss/metadata.json +5 -5
- package/dist/index.d.mts +89 -2
- package/dist/index.d.ts +89 -2
- package/dist/index.js +224 -142
- package/dist/index.mjs +191 -111
- package/package.json +1 -1
|
@@ -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,o=!0){(null==e?void 0:e.addEventListener)&&e.addEventListener(t,n,o)}function onWeak(e,t,n,o=!0){addWeakElement(e),on(e,t,n,o)}function off(e,t,n,o=!0){(null==e?void 0:e.removeEventListener)&&e.removeEventListener(t,n,o)}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,o=Object.keys(e),a=o.length;n<a;n++){const a=o[n],i=e[a];t.setAttribute(a,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,o=query("input",parent(n));o&&(null==(t=n.textContent)?void 0:t.includes("visibility"))&&("password"===o.type?(o.type="text",n.textContent="visibility_off"):(o.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),o=queryAll("input",t);if(!o.length||!n)return;const a=rootSizeInPixels(),i=hasClass(t,"max")?0:.25*a*100/o[0].offsetWidth,r=[],s=[];for(let e=0,t=o.length;e<t;e++){const t=parseFloat(o[e].min)||0,n=parseFloat(o[e].max)||100,a=parseFloat(o[e].value)||0,l=100*(a-t)/(n-t),c=i/2-i*l/100;r.push(l+c),s.push(a)}let l=r[0],c=0,u=100-c-l,d=s[0],p=s[1]||0;o.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 o=getComputedStyle(t),a=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]+":"+o.getPropertyValue(i[e])+";",_lastTheme.dark+=i[e]+":"+a.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,o=Object.keys(e),a=o.length;n<a;n++){const a=o[n],i=e[a];t+="--"+a.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 o="light"===e?_lastTheme.light:_lastTheme.dark;return t.materialDynamicColors&&n.setAttribute("style",o),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,o){hasTag(o,"button")||hasClass(o,"button")||hasClass(o,"chip")||addClass(o,"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 o=hasClass(t,"active")||t.open,a=hasClass(t,"modal");a||off(t,"keydown",onKeydownDialog,!1),hasClass(n,"overlay")||(n=create({class:"overlay"}),insertBefore(n,t),await wait(90)),a||onWeak(n,"click",onClickOverlay,!1),o?closeDialog(t,n):openDialog(t,n,a,e)}let _timeoutMenu,_timeoutSnackbar;function onClickDocument(e){off(document.body,"click",onClickDocument);const t=e.target,n=queryAll("menu.active");for(let o=0;o<n.length;o++)updateMenu(t,n[o],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 o=hasClass(t,"active"),a=(null==n?void 0:n.target)===e,i=!!e.closest("menu");!o&&i||o&&a?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,o=n.getBoundingClientRect(),a=Math.max(o.width,o.height),i=a/2,r=t?e.clientX-o.left-i:o.width/2-i,s=t?e.clientY-o.top-i:o.height/2-i,l=document.createElement("div");l.className="ripple-js";const c=document.createElement("div");c.style.inlineSize=c.style.blockSize=`${a}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,o){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,o));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 o=t.querySelector(".kds-sidebar-dropdown-icon");o&&(o.style.transform=n.classList.contains("kds-dropdown-open")?"rotate(180deg)":"rotate(0deg)")}),document.addEventListener("click",function(o){if(!e.contains(o.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 o=new CustomEvent("kds-sidebar-nav-change",{detail:{item:this,text:this.querySelector("span")?.textContent||""},bubbles:!0});e.dispatchEvent(o)})})}(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 o=document.createElement("button");o.className="kds-snackbar-close",o.setAttribute("aria-label","Cerrar"),o.innerHTML='<i class="material-symbols-outlined">close</i>',o.onclick=function(){t(e)},e.appendChild(o),setTimeout(function(){t(e)},5e3)}),window.closeModal=function(e){const t=document.getElementById(e);t&&t.classList.remove("active")},n(),o(),a(),i(),u(),d(),p(),r(),s(),c(),l(),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,o=n?n.querySelector("svg, img"):null;if(o){var a=e.querySelector(".kds-invoice-header"),i=a?a.firstElementChild:null;if(i){var r=document.createElement("div");r.className="kds-brand-inner",r.appendChild(o.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 o=n[n.length-1];t.classList.add("inside"),o.appendChild(t)}}})}function a(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 o=t.getAttribute("aria-controls"),a=o?document.getElementById(o):t.parentElement.querySelector("[data-expand-panel]");a&&(n?(a.classList.remove("open"),a.style.maxHeight=""):(a.classList.add("open"),a.style.maxHeight=a.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 o=n.dataset.copyAll,a=o?document.querySelector(o):n.closest(".kds-copy-header").nextElementSibling;if(!a)return;var i=a.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(),o=Date.now()-n,a=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()-o,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;a&&(a.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 o=e.parentElement;o&&o.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"),o=n.querySelectorAll("button");o.forEach(function(e){e.classList.remove("active"),e.setAttribute("aria-selected","false")}),t.classList.add("active"),t.setAttribute("aria-selected","true");var a=Array.prototype.indexOf.call(o,t);n.style.setProperty("--_active-idx",a);var i=n.parentElement;i&&i.querySelectorAll("[data-kds-tab-panel]").forEach(function(e,t){e.hidden=t!==a}),n.dispatchEvent(new CustomEvent("kds:tab:change",{bubbles:!0,detail:{index:a,button:t}}))}})}function l(e){var t=(e=e||document).querySelector("#bankModal"),n=e.querySelector("#bankSearch"),o=e.querySelector("#bankModalList"),a=e.querySelector("#bankNoResults");function i(e){if(o){var t=e.toLowerCase().trim(),n=o.querySelectorAll(".kds-bank-row"),i=0;n.forEach(function(e){var n=e.querySelector(".kds-bank-row-name");if(n){var o=n.textContent.toLowerCase(),a=!t||-1!==o.indexOf(t);e.style.display=a?"":"none",a&&i++}}),a&&a.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")}),o&&o.addEventListener("click",function(e){var n=e.target.closest(".kds-bank-row");if(n){var o=n.dataset.bankId||n.dataset.bank||"",a=n.querySelector(".kds-bank-row-name");t.dispatchEvent(new CustomEvent("kds:bank:selected",{bubbles:!0,detail:{id:o,name:a?a.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 o(){var o=e.querySelector(".kds-screen.active");if(o&&o.querySelector(".kds-invoice-sticky"))return n()?void(t||(t=!0,requestAnimationFrame(function(){t=!1;var n=e.querySelector(".kds-screen.active");if(n){var o=n.querySelector(".kds-invoice-sticky");if(o){var a=window.scrollY||window.pageYOffset,i=Math.min(Math.max((a-0)/20,0),1);if(!n.style.getPropertyValue("--collapse-collapsible-h")){var r=o.querySelector(".kds-invoice-collapsible");r&&n.style.setProperty("--collapse-collapsible-h",r.offsetHeight+"px")}n.style.setProperty("--collapse-progress",i),o.classList.toggle("is-collapsed",i>=1),i>0&&o.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")})}}}))):(o.style.removeProperty("--collapse-progress"),void o.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",o,{passive:!0}),o()}function u(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 d(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,o=n?document.querySelector(n):t.previousElementSibling;if(o){var a=o.querySelectorAll(".kds-copyable-table-row[data-copy]"),i=[];a.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"),a.forEach(function(e){e.classList.add("copied")}),setTimeout(function(){t.classList.remove("copied"),e&&(e.textContent=n),a.forEach(function(e){e.classList.remove("copied")})},1400)})}}})}function p(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 f(e,n,o){n=n||"info",o=o||5e3;var a=document.createElement("div");a.className="snackbar active "+n,a.setAttribute("data-auto-dismiss","true"),a.style.setProperty("--kds-snackbar-duration",o+"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(a)},a.appendChild(i),a.appendChild(r),a.appendChild(s),document.body.appendChild(a),setTimeout(function(){t(a)},o)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e(),window.Khipu||(window.Khipu={}),window.Khipu.showSnackbar=f,window.Khipu.closeModal=window.closeModal,window.Khipu.initBrandInner=n,window.Khipu.initSecureFooterInside=o,window.Khipu.initExpandToggle=a,window.Khipu.initCopyRow=i,window.Khipu.initCountdown=r,window.Khipu.initSegmentedTabs=s,window.Khipu.initCopyableTable=u,window.Khipu.initCopyAllBtn=d,window.Khipu.initInfoTip=p,window.Khipu.initBankModal=l,window.Khipu.initStickyInvoice=c,window.showSnackbar=f}();
|
|
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,o=!0){(null==e?void 0:e.addEventListener)&&e.addEventListener(t,n,o)}function onWeak(e,t,n,o=!0){addWeakElement(e),on(e,t,n,o)}function off(e,t,n,o=!0){(null==e?void 0:e.removeEventListener)&&e.removeEventListener(t,n,o)}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,o=Object.keys(e),a=o.length;n<a;n++){const a=o[n],i=e[a];t.setAttribute(a,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,o=query("input",parent(n));o&&(null==(t=n.textContent)?void 0:t.includes("visibility"))&&("password"===o.type?(o.type="text",n.textContent="visibility_off"):(o.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),o=queryAll("input",t);if(!o.length||!n)return;const a=rootSizeInPixels(),i=hasClass(t,"max")?0:.25*a*100/o[0].offsetWidth,r=[],s=[];for(let e=0,t=o.length;e<t;e++){const t=parseFloat(o[e].min)||0,n=parseFloat(o[e].max)||100,a=parseFloat(o[e].value)||0,l=100*(a-t)/(n-t),c=i/2-i*l/100;r.push(l+c),s.push(a)}let l=r[0],c=0,u=100-c-l,d=s[0],p=s[1]||0;o.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 o=getComputedStyle(t),a=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]+":"+o.getPropertyValue(i[e])+";",_lastTheme.dark+=i[e]+":"+a.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,o=Object.keys(e),a=o.length;n<a;n++){const a=o[n],i=e[a];t+="--"+a.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 o="light"===e?_lastTheme.light:_lastTheme.dark;return t.materialDynamicColors&&n.setAttribute("style",o),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,o){hasTag(o,"button")||hasClass(o,"button")||hasClass(o,"chip")||addClass(o,"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 o=hasClass(t,"active")||t.open,a=hasClass(t,"modal");a||off(t,"keydown",onKeydownDialog,!1),hasClass(n,"overlay")||(n=create({class:"overlay"}),insertBefore(n,t),await wait(90)),a||onWeak(n,"click",onClickOverlay,!1),o?closeDialog(t,n):openDialog(t,n,a,e)}let _timeoutMenu,_timeoutSnackbar;function onClickDocument(e){off(document.body,"click",onClickDocument);const t=e.target,n=queryAll("menu.active");for(let o=0;o<n.length;o++)updateMenu(t,n[o],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 o=hasClass(t,"active"),a=(null==n?void 0:n.target)===e,i=!!e.closest("menu");!o&&i||o&&a?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,o=n.getBoundingClientRect(),a=Math.max(o.width,o.height),i=a/2,r=t?e.clientX-o.left-i:o.width/2-i,s=t?e.clientY-o.top-i:o.height/2-i,l=document.createElement("div");l.className="ripple-js";const c=document.createElement("div");c.style.inlineSize=c.style.blockSize=`${a}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,o){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,o));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 o=t.querySelector(".kds-sidebar-dropdown-icon");o&&(o.style.transform=n.classList.contains("kds-dropdown-open")?"rotate(180deg)":"rotate(0deg)")}),document.addEventListener("click",function(o){if(!e.contains(o.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 o=new CustomEvent("kds-sidebar-nav-change",{detail:{item:this,text:this.querySelector("span")?.textContent||""},bubbles:!0});e.dispatchEvent(o)})})}(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 o=document.createElement("button");o.className="kds-snackbar-close",o.setAttribute("aria-label","Cerrar"),o.innerHTML='<i class="material-symbols-outlined">close</i>',o.onclick=function(){t(e)},e.appendChild(o),setTimeout(function(){t(e)},5e3)}),window.closeModal=function(e){const t=document.getElementById(e);t&&t.classList.remove("active")},n(),o(),a(),i(),d(),p(),f(),r(),s(),c(),u(),l(),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,o=n?n.querySelector("svg, img"):null;if(o){var a=e.querySelector(".kds-invoice-header"),i=a?a.firstElementChild:null;if(i){var r=document.createElement("div");r.className="kds-brand-inner",r.appendChild(o.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 o=n[n.length-1];t.classList.add("inside"),o.appendChild(t)}}})}function a(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 o=t.getAttribute("aria-controls"),a=o?document.getElementById(o):t.parentElement.querySelector("[data-expand-panel]");a&&(n?(a.classList.remove("open"),a.style.maxHeight=""):(a.classList.add("open"),a.style.maxHeight=a.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 o=n.dataset.copyAll,a=o?document.querySelector(o):n.closest(".kds-copy-header").nextElementSibling;if(!a)return;var i=a.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(),o=Date.now()-n,a=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()-o,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;a&&(a.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 o=e.parentElement;o&&o.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"),o=n.querySelectorAll("button");o.forEach(function(e){e.classList.remove("active"),e.setAttribute("aria-selected","false")}),t.classList.add("active"),t.setAttribute("aria-selected","true");var a=Array.prototype.indexOf.call(o,t);n.style.setProperty("--_active-idx",a);var i=n.parentElement;i&&i.querySelectorAll("[data-kds-tab-panel]").forEach(function(e,t){e.hidden=t!==a}),n.dispatchEvent(new CustomEvent("kds:tab:change",{bubbles:!0,detail:{index:a,button:t}}))}})}function l(e){var t=(e=e||document).querySelector("#bankModal"),n=e.querySelector("#bankSearch"),o=e.querySelector("#bankModalList"),a=e.querySelector("#bankNoResults");function i(e){if(o){var t=e.toLowerCase().trim(),n=o.querySelectorAll(".kds-bank-row"),i=0;n.forEach(function(e){var n=e.querySelector(".kds-bank-row-name");if(n){var o=n.textContent.toLowerCase(),a=!t||-1!==o.indexOf(t);e.style.display=a?"":"none",a&&i++}}),a&&a.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")}),o&&o.addEventListener("click",function(e){var n=e.target.closest(".kds-bank-row");if(n){var o=n.dataset.bankId||n.dataset.bank||"",a=n.querySelector(".kds-bank-row-name");t.dispatchEvent(new CustomEvent("kds:bank:selected",{bubbles:!0,detail:{id:o,name:a?a.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 o(){var o=e.querySelector(".kds-screen.active");if(o&&o.querySelector(".kds-invoice-sticky"))return n()?void(t||(t=!0,requestAnimationFrame(function(){t=!1;var n=e.querySelector(".kds-screen.active");if(n){var o=n.querySelector(".kds-invoice-sticky");if(o){var a=window.scrollY||window.pageYOffset,i=Math.min(Math.max((a-0)/20,0),1);if(!n.style.getPropertyValue("--collapse-collapsible-h")){var r=o.querySelector(".kds-invoice-collapsible");r&&n.style.setProperty("--collapse-collapsible-h",r.offsetHeight+"px")}n.style.setProperty("--collapse-progress",i),o.classList.toggle("is-collapsed",i>=1),i>0&&o.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")})}}}))):(o.style.removeProperty("--collapse-progress"),void o.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",o,{passive:!0}),o()}function u(e){var t=(e=e||document).querySelectorAll("[data-hide-on-scroll]");if(t.length){var n=0,o=!1,a=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(){o=!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,o=parseInt(t.getAttribute("data-hide-top-offset"),10)||0,i=t.getAttribute("data-hide-class")||"kds-fab--hidden",r=a.has(t)?a.get(t):e;if(e<=o)return t.classList.remove(i),void a.set(t,e);var s=e-r;Math.abs(s)<n||(t.classList.toggle(i,s>0),a.set(t,e))})}function r(){o||(o=!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,o=n?document.querySelector(n):t.previousElementSibling;if(o){var a=o.querySelectorAll(".kds-copyable-table-row[data-copy]"),i=[];a.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"),a.forEach(function(e){e.classList.add("copied")}),setTimeout(function(){t.classList.remove("copied"),e&&(e.textContent=n),a.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,o){n=n||"info",o=o||5e3;var a=document.createElement("div");a.className="snackbar active "+n,a.setAttribute("data-auto-dismiss","true"),a.style.setProperty("--kds-snackbar-duration",o+"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(a)},a.appendChild(i),a.appendChild(r),a.appendChild(s),document.body.appendChild(a),setTimeout(function(){t(a)},o)}"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=o,window.Khipu.initExpandToggle=a,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}();
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
*
|
|
14
14
|
* AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
|
|
15
15
|
* Source: design-system/src/tokens/tokens.json
|
|
16
|
-
* Generated: 2026-07-
|
|
16
|
+
* Generated: 2026-07-01T19:20:36.949Z
|
|
17
17
|
*
|
|
18
18
|
* To regenerate:
|
|
19
19
|
* cd design-system && npm run tokens:generate
|
|
@@ -365,6 +365,7 @@
|
|
|
365
365
|
RESPONSIVE TYPOGRAPHY (MOBILE BASE)
|
|
366
366
|
========================================================================== */
|
|
367
367
|
|
|
368
|
+
--kds-font-size-2xs: 0.5625rem;
|
|
368
369
|
|
|
369
370
|
/* Base font-size scale */
|
|
370
371
|
--kds-font-size-xs: 0.6875rem;
|
|
@@ -412,6 +413,7 @@
|
|
|
412
413
|
/* Tablet (600px+) - Typography */
|
|
413
414
|
@media (min-width: 600px) {
|
|
414
415
|
.kds-theme-root {
|
|
416
|
+
--kds-font-size-2xs: 0.625rem;
|
|
415
417
|
|
|
416
418
|
/* Base font-size scale */
|
|
417
419
|
--kds-font-size-xs: 0.75rem;
|
|
@@ -449,6 +451,7 @@
|
|
|
449
451
|
/* Desktop (840px+) - Typography */
|
|
450
452
|
@media (min-width: 840px) {
|
|
451
453
|
.kds-theme-root {
|
|
454
|
+
--kds-font-size-2xs: 0.625rem;
|
|
452
455
|
|
|
453
456
|
/* Base font-size scale */
|
|
454
457
|
--kds-font-size-xs: 0.75rem;
|
|
@@ -2893,7 +2896,7 @@
|
|
|
2893
2896
|
border-radius: 8px;
|
|
2894
2897
|
cursor: pointer;
|
|
2895
2898
|
transition: background-color 0.2s;
|
|
2896
|
-
font-size:
|
|
2899
|
+
font-size: var(--kds-font-size-sm);
|
|
2897
2900
|
line-height: 1.5;
|
|
2898
2901
|
color: var(--kds-color-text-primary);
|
|
2899
2902
|
}
|
|
@@ -4734,6 +4737,35 @@
|
|
|
4734
4737
|
text-transform: uppercase;
|
|
4735
4738
|
}
|
|
4736
4739
|
|
|
4740
|
+
/* Value — dato/valor destacado (ej. nombre del comercio en el header del cobro). */
|
|
4741
|
+
.kds-theme-root .kds-text-value {
|
|
4742
|
+
font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
|
|
4743
|
+
font-size: var(--kds-font-size-sm);
|
|
4744
|
+
font-weight: var(--kds-font-weight-semibold);
|
|
4745
|
+
line-height: var(--kds-line-height-relaxed);
|
|
4746
|
+
color: var(--kds-color-gray-800);
|
|
4747
|
+
}
|
|
4748
|
+
|
|
4749
|
+
/* Code — texto tipo código/referencia (mono, uppercase, gris), como el "CÓDIGO" del header. */
|
|
4750
|
+
.kds-theme-root .kds-text-code {
|
|
4751
|
+
font-family: var(--kds-font-family-mono);
|
|
4752
|
+
font-size: var(--kds-font-size-xs);
|
|
4753
|
+
font-weight: var(--kds-font-weight-regular);
|
|
4754
|
+
letter-spacing: var(--kds-letter-spacing-wider);
|
|
4755
|
+
font-variant-numeric: tabular-nums;
|
|
4756
|
+
color: var(--kds-color-gray-400);
|
|
4757
|
+
text-transform: uppercase;
|
|
4758
|
+
}
|
|
4759
|
+
|
|
4760
|
+
/* Caption — texto muy chico y liviano para pie de página (ej. número de versión). */
|
|
4761
|
+
.kds-theme-root .kds-text-caption {
|
|
4762
|
+
font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
|
|
4763
|
+
font-size: var(--kds-font-size-2xs);
|
|
4764
|
+
font-weight: var(--kds-font-weight-regular);
|
|
4765
|
+
line-height: var(--kds-line-height-normal);
|
|
4766
|
+
color: var(--kds-color-gray-400);
|
|
4767
|
+
}
|
|
4768
|
+
|
|
4737
4769
|
.kds-theme-root .kds-text-link {
|
|
4738
4770
|
font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
|
|
4739
4771
|
font-size: inherit;
|
|
@@ -5509,6 +5541,125 @@
|
|
|
5509
5541
|
box-shadow: 0 -4px 16px rgba(16,24,40,.08);
|
|
5510
5542
|
}
|
|
5511
5543
|
|
|
5544
|
+
/* ========================================
|
|
5545
|
+
08b - FAB (.kds-fab)
|
|
5546
|
+
Circular, icon-only floating action button with an animated hide state.
|
|
5547
|
+
Presentational: drive `.kds-fab--hidden` from useHideOnScroll for scroll-away.
|
|
5548
|
+
======================================== */
|
|
5549
|
+
|
|
5550
|
+
.kds-theme-root .kds-fab {
|
|
5551
|
+
display: inline-flex;
|
|
5552
|
+
align-items: center;
|
|
5553
|
+
justify-content: center;
|
|
5554
|
+
width: var(--kds-spacing-5);
|
|
5555
|
+
height: var(--kds-spacing-5);
|
|
5556
|
+
padding: 0;
|
|
5557
|
+
border: none;
|
|
5558
|
+
border-radius: var(--kds-radius-full);
|
|
5559
|
+
background: var(--kds-color-background-paper);
|
|
5560
|
+
color: var(--kds-color-text-primary);
|
|
5561
|
+
box-shadow: var(--kds-shadow-elevated);
|
|
5562
|
+
cursor: pointer;
|
|
5563
|
+
z-index: 100;
|
|
5564
|
+
/* Neutralize native button rendering so the pressed state doesn't flash a square. */
|
|
5565
|
+
-webkit-appearance: none;
|
|
5566
|
+
appearance: none;
|
|
5567
|
+
-webkit-tap-highlight-color: transparent;
|
|
5568
|
+
transition: opacity var(--kds-transition-short) ease, transform var(--kds-transition-short) ease,
|
|
5569
|
+
background-color var(--kds-transition-shorter) ease;
|
|
5570
|
+
}
|
|
5571
|
+
|
|
5572
|
+
/* Keep the circle in EVERY interaction state. Uses `button.kds-fab` (element + class) to
|
|
5573
|
+
out-specify BeerCSS's base `button`/`button:active` rules — same trick as `.kds-btn`. */
|
|
5574
|
+
.kds-theme-root button.kds-fab,
|
|
5575
|
+
.kds-theme-root button.kds-fab:hover,
|
|
5576
|
+
.kds-theme-root button.kds-fab:active,
|
|
5577
|
+
.kds-theme-root button.kds-fab:focus,
|
|
5578
|
+
.kds-theme-root button.kds-fab:focus-visible {
|
|
5579
|
+
border-radius: var(--kds-radius-full);
|
|
5580
|
+
background: var(--kds-color-background-paper);
|
|
5581
|
+
}
|
|
5582
|
+
|
|
5583
|
+
.kds-theme-root button.kds-fab:hover:not(:disabled) {
|
|
5584
|
+
background: var(--kds-color-background-muted);
|
|
5585
|
+
}
|
|
5586
|
+
|
|
5587
|
+
/* Subtle press feedback that preserves the round shape. */
|
|
5588
|
+
.kds-theme-root button.kds-fab:active:not(:disabled) {
|
|
5589
|
+
transform: translateY(var(--kds-spacing-0-25));
|
|
5590
|
+
}
|
|
5591
|
+
|
|
5592
|
+
.kds-theme-root button.kds-fab:focus-visible {
|
|
5593
|
+
outline: var(--kds-spacing-0-25) solid var(--kds-color-primary-main);
|
|
5594
|
+
outline-offset: var(--kds-spacing-0-25);
|
|
5595
|
+
}
|
|
5596
|
+
|
|
5597
|
+
.kds-theme-root .kds-fab > i.material-symbols-outlined {
|
|
5598
|
+
font-size: var(--kds-spacing-button-icon-size);
|
|
5599
|
+
line-height: 1;
|
|
5600
|
+
}
|
|
5601
|
+
|
|
5602
|
+
/* Pinned corners — fixed to the viewport (stays visible on scroll-up, iframe-friendly).
|
|
5603
|
+
Horizontally the top-right FAB hugs the right edge of the centered content column set via
|
|
5604
|
+
`--kds-fab-column-width` (default 100% → viewport edge). The consumer sets that var to its
|
|
5605
|
+
widget width so on desktop the FAB overlaps the header's top-right corner instead of drifting
|
|
5606
|
+
to the far viewport edge. `max(...)` keeps at least a token inset on narrow (mobile) viewports. */
|
|
5607
|
+
.kds-theme-root .kds-fab--top-right,
|
|
5608
|
+
.kds-theme-root .kds-fab--top-left,
|
|
5609
|
+
.kds-theme-root .kds-fab--bottom-right,
|
|
5610
|
+
.kds-theme-root .kds-fab--bottom-left {
|
|
5611
|
+
position: fixed;
|
|
5612
|
+
}
|
|
5613
|
+
|
|
5614
|
+
.kds-theme-root .kds-fab--top-right {
|
|
5615
|
+
top: var(--kds-spacing-2);
|
|
5616
|
+
right: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
|
|
5617
|
+
}
|
|
5618
|
+
|
|
5619
|
+
.kds-theme-root .kds-fab--top-left {
|
|
5620
|
+
top: var(--kds-spacing-2);
|
|
5621
|
+
left: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
|
|
5622
|
+
}
|
|
5623
|
+
|
|
5624
|
+
.kds-theme-root .kds-fab--bottom-right {
|
|
5625
|
+
bottom: var(--kds-spacing-2);
|
|
5626
|
+
right: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
|
|
5627
|
+
}
|
|
5628
|
+
|
|
5629
|
+
.kds-theme-root .kds-fab--bottom-left {
|
|
5630
|
+
bottom: var(--kds-spacing-2);
|
|
5631
|
+
left: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
|
|
5632
|
+
}
|
|
5633
|
+
|
|
5634
|
+
/* Desktop: nudge the top-right FAB up so it sits partially over the header's top edge. */
|
|
5635
|
+
@media (min-width: 768px) {
|
|
5636
|
+
.kds-theme-root .kds-fab--top-right {
|
|
5637
|
+
top: var(--kds-spacing-1);
|
|
5638
|
+
}
|
|
5639
|
+
}
|
|
5640
|
+
|
|
5641
|
+
/* Hidden (scroll-away) state — fade + slide toward the nearest edge */
|
|
5642
|
+
.kds-theme-root .kds-fab--hidden {
|
|
5643
|
+
opacity: 0;
|
|
5644
|
+
transform: translateY(calc(-1 * var(--kds-spacing-1))) scale(0.9);
|
|
5645
|
+
pointer-events: none;
|
|
5646
|
+
}
|
|
5647
|
+
|
|
5648
|
+
.kds-theme-root .kds-fab--bottom-right.kds-fab--hidden,
|
|
5649
|
+
.kds-theme-root .kds-fab--bottom-left.kds-fab--hidden {
|
|
5650
|
+
transform: translateY(var(--kds-spacing-1)) scale(0.9);
|
|
5651
|
+
}
|
|
5652
|
+
|
|
5653
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5654
|
+
.kds-theme-root .kds-fab {
|
|
5655
|
+
transition: opacity var(--kds-transition-short) ease;
|
|
5656
|
+
}
|
|
5657
|
+
|
|
5658
|
+
.kds-theme-root .kds-fab--hidden {
|
|
5659
|
+
transform: none;
|
|
5660
|
+
}
|
|
5661
|
+
}
|
|
5662
|
+
|
|
5512
5663
|
/* ========================================
|
|
5513
5664
|
09 - SUCCESS MARK (.kds-success-mark)
|
|
5514
5665
|
Large success icon for completion screens
|
|
@@ -5632,10 +5783,8 @@
|
|
|
5632
5783
|
display: block;
|
|
5633
5784
|
object-fit: contain;
|
|
5634
5785
|
overflow: visible;
|
|
5635
|
-
/*
|
|
5636
|
-
|
|
5637
|
-
position: relative;
|
|
5638
|
-
top: 1px;
|
|
5786
|
+
/* La tinta del wordmark ocupa casi todo su viewBox (45x15), así que el centro de caja
|
|
5787
|
+
coincide con el óptico: se alinea por `align-items: center` del footer, sin nudge. */
|
|
5639
5788
|
}
|
|
5640
5789
|
|
|
5641
5790
|
/* Divisor entre el logo de Khipu y el del PSP ("Khipu | klap") */
|