@moni-labs/moni-ui 0.4.14 → 0.4.17

package/custom-elements.json

@@ -373,6 +373,16 @@
               },
               "default": "''",
               "description": "Restricción opcional de inline-size (ancho) máximo para la hoja.\n\nCuando se establece (ej. `'640px'`), la hoja no excederá este ancho incluso en\npantallas anchas. Útil para puntos de interrupción de tableta/escritorio donde se prefiere\nun modal centrado en lugar de una hoja de ancho completo."
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "description": "Abre el bottom sheet."
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "description": "Cierra el bottom sheet ejecutando la animación fluida hacia abajo."
             }
           ],
           "events": [],

package/dist/browser/moni-ui.iife.min.js

@@ -1093,7 +1093,7 @@ var MoniUI=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Modul
 			.badge.min { clip-path: circle(18.75% at 50% 50%); }
 		`]}render(){return z`<span class=${[`badge`,this.position||``,this.shape||``,this.inline?`none`:``].filter(Boolean).join(` `)} part="badge">
 			<slot>${this.value}</slot>
-		</span>`}};K([H({reflect:!0})],qe.prototype,`value`,void 0),K([H({reflect:!0})],qe.prototype,`position`,void 0),K([H({reflect:!0})],qe.prototype,`shape`,void 0),K([H({reflect:!0})],qe.prototype,`color`,void 0),K([H({type:Boolean,reflect:!0})],qe.prototype,`inline`,void 0),K([H({type:Boolean,reflect:!0})],qe.prototype,`border`,void 0),qe=K([V(`moni-badge`)],qe);function Je(e,t,n){let r=new CustomEvent(t,{bubbles:n?.bubbles??!0,composed:n?.composed??!0,cancelable:n?.cancelable??!1,detail:n?.detail??{}});return e.dispatchEvent(r)}var Ye=class extends W{constructor(...e){super(...e),this.open=!1,this.size=`medium`,this.modal=!0,this.title=``,this.handle=!1,this.positioning=`fixed`,this.expandedHeight=`85%`,this.maxWidth=``,this._originalParent=null,this._originalSibling=null,this._isDragging=!1,this._startY=0,this._currentTranslationY=0,this._sheetHeight=0,this._defaultHeight=0,this._justDragged=!1,this._skipRequestClose=!1}willUpdate(e){e.has(`open`)&&this.open!==e.get(`open`)&&(this.open?Je(this,`moni-request-open`,{cancelable:!0})||(this.open=!1):this._skipRequestClose||Je(this,`moni-request-close`,{cancelable:!0})||(this.open=!0))}async _animateAndClose(){this._skipRequestClose=!0;let e=Je(this,`moni-request-close`,{cancelable:!0});return this._skipRequestClose=!1,e?(this.dispatchEvent(new Event(`close`,{bubbles:!0,composed:!0})),Je(this,`moni-close`),this._dialog.classList.remove(`expanded`),this._dialog.style.transform=`translateY(100%)`,this._dialog.style.height=``,await new Promise(e=>{let t=()=>{this._dialog.removeEventListener(`transitionend`,t),e(null)};this._dialog.addEventListener(`transitionend`,t),setTimeout(t,300)}),this._dialog.style.transform=``,this._skipRequestClose=!0,this.open=!1,this._skipRequestClose=!1,Je(this,`moni-closed`),!0):!1}_getMaxHeightPx(){let e=this.expandedHeight||`85%`;return e.endsWith(`%`)||e.endsWith(`vh`)?window.innerHeight*(parseFloat(e)/100):e.endsWith(`px`)?parseFloat(e):window.innerHeight*.85}_onPointerDown(e){let t=e.target;!t.closest(`.handle`)&&!t.closest(`header`)||(this._isDragging=!0,this._startY=e.clientY,this._sheetHeight=this._dialog.getBoundingClientRect().height,this._currentTranslationY=0,this._dialog.classList.contains(`expanded`)||(this._defaultHeight=this._sheetHeight),t.setPointerCapture(e.pointerId),this._dialog.classList.add(`dragging`))}_onPointerMove(e){if(!this._isDragging)return;let t=e.clientY-this._startY,n=this._dialog.classList.contains(`expanded`),r=this._getMaxHeightPx();if(n){if(t>0){let e=this._sheetHeight-t;this._dialog.style.transform=``,this._dialog.style.height=`${Math.max(0,e)}px`}else{let e=this._sheetHeight-t*.2;this._dialog.style.transform=``,this._dialog.style.height=`${Math.min(r,e)}px`}}else if(t>0)this._currentTranslationY=t,this._dialog.style.transform=`translateY(${t}px)`,this._dialog.style.height=``;else{let e=this._sheetHeight-t;this._dialog.style.transform=``,this._dialog.style.height=`${Math.min(r,e)}px`}}_onPointerUp(e){if(!this._isDragging)return;e.target.releasePointerCapture(e.pointerId),this._isDragging=!1,this._dialog.classList.remove(`dragging`);let t=e.clientY-this._startY;Math.abs(t)>5&&(this._justDragged=!0,setTimeout(()=>{this._justDragged=!1},50));let n=this._dialog.classList.contains(`expanded`),r=this._getMaxHeightPx();if(n){let e=this._sheetHeight-t;e<this._defaultHeight-80?this._animateAndClose().then(e=>{e||(this._dialog.style.transform=``,this._dialog.style.height=``)}):e<(r+this._defaultHeight)/2?(this._dialog.classList.remove(`expanded`),this._dialog.style.transform=``,this._dialog.style.height=``):(this._dialog.style.transform=``,this._dialog.style.height=``)}else t<0?(this._sheetHeight-t>this._sheetHeight+80&&this._dialog.classList.add(`expanded`),this._dialog.style.transform=``,this._dialog.style.height=``):this._currentTranslationY>80?this._animateAndClose().then(e=>{e||(this._dialog.style.transform=``)}):this._dialog.style.transform=``}_onPointerCancel(e){this._isDragging&&(e.target.releasePointerCapture(e.pointerId),this._isDragging=!1,this._dialog.classList.remove(`dragging`),this._dialog.style.transform=``,this._dialog.style.height=``)}_onDialogClick(e){if(this._justDragged){this._justDragged=!1;return}this.modal&&e.target===this._dialog&&this._animateAndClose()}updated(e){super.updated(e),e.has(`expandedHeight`)&&this.style.setProperty(`--moni-bottom-sheet-expanded-height`,this.expandedHeight),e.has(`maxWidth`)&&this.style.setProperty(`--moni-bottom-sheet-max-width`,this.maxWidth||`100%`),e.has(`open`)&&(this.open?(e.get(`open`)!==void 0&&Je(this,`moni-open`),this.positioning===`body`&&this.parentNode!==document.body&&(this._originalParent=this.parentNode,this._originalSibling=this.nextSibling,document.body.appendChild(this)),e.get(`open`)!==void 0&&setTimeout(()=>Je(this,`moni-opened`),300)):(this._dialog&&this._dialog.classList.remove(`expanded`),this.positioning===`body`&&this._originalParent&&this.parentNode===document.body&&(this._originalParent.insertBefore(this,this._originalSibling),this._originalParent=null,this._originalSibling=null)))}disconnectedCallback(){super.disconnectedCallback(),this.parentNode===document.body&&this.positioning===`body`&&this._originalParent&&this._originalParent.insertBefore(this,this._originalSibling)}static{this.styles=[G,g`
+		</span>`}};K([H({reflect:!0})],qe.prototype,`value`,void 0),K([H({reflect:!0})],qe.prototype,`position`,void 0),K([H({reflect:!0})],qe.prototype,`shape`,void 0),K([H({reflect:!0})],qe.prototype,`color`,void 0),K([H({type:Boolean,reflect:!0})],qe.prototype,`inline`,void 0),K([H({type:Boolean,reflect:!0})],qe.prototype,`border`,void 0),qe=K([V(`moni-badge`)],qe);function Je(e,t,n){let r=new CustomEvent(t,{bubbles:n?.bubbles??!0,composed:n?.composed??!0,cancelable:n?.cancelable??!1,detail:n?.detail??{}});return e.dispatchEvent(r)}var Ye=class extends W{constructor(...e){super(...e),this.open=!1,this.size=`medium`,this.modal=!0,this.title=``,this.handle=!1,this.positioning=`fixed`,this.expandedHeight=`85%`,this.maxWidth=``,this._originalParent=null,this._originalSibling=null,this._isDragging=!1,this._startY=0,this._lastDeltaY=0,this._sheetHeight=0,this._defaultHeight=0,this._justDragged=!1,this._skipRequestClose=!1,this._isClosing=!1}show(){this._isClosing=!1,this._isDragging=!1,this._lastDeltaY=0,this._dialog&&(this._dialog.classList.remove(`dragging`,`expanded`),this._dialog.style.transform=``,this._dialog.style.height=``),this.open=!0}close(){return this._animateAndClose()}willUpdate(e){e.has(`open`)&&this.open!==e.get(`open`)&&(this.open?Je(this,`moni-request-open`,{cancelable:!0})||(this.open=!1):this._skipRequestClose||Je(this,`moni-request-close`,{cancelable:!0})||(this.open=!0))}async _animateAndClose(){if(this._isClosing||!this.open)return!1;this._isClosing=!0,this._skipRequestClose=!0;let e=Je(this,`moni-request-close`,{cancelable:!0});return this._skipRequestClose=!1,e?(Je(this,`moni-close`),this._dialog.classList.remove(`expanded`),this._dialog.style.transform=`translateY(100%)`,this._dialog.style.height=``,await new Promise(e=>{let t=()=>{this._dialog.removeEventListener(`transitionend`,t),e(null)};this._dialog.addEventListener(`transitionend`,t),setTimeout(t,300)}),this._isClosing=!1,this._isDragging=!1,this._lastDeltaY=0,this._dialog&&(this._dialog.classList.remove(`dragging`,`expanded`),this._dialog.style.transform=``,this._dialog.style.height=``),this._skipRequestClose=!0,this.open=!1,this._skipRequestClose=!1,this.dispatchEvent(new Event(`close`,{bubbles:!0,composed:!0})),Je(this,`moni-closed`),!0):(this._isClosing=!1,!1)}_getMaxHeightPx(){let e=this.expandedHeight||`85%`;return e.endsWith(`%`)||e.endsWith(`vh`)?window.innerHeight*(parseFloat(e)/100):e.endsWith(`px`)?parseFloat(e):window.innerHeight*.85}_onPointerDown(e){let t=e.target;if(!(!t.closest(`.handle`)&&!t.closest(`header`))){this._isDragging=!0,this._startY=e.clientY,this._sheetHeight=this._dialog.getBoundingClientRect().height,this._lastDeltaY=0,this._dialog.classList.contains(`expanded`)?this._defaultHeight||=Math.min(this._sheetHeight*.6,384):this._defaultHeight=this._sheetHeight;try{t.setPointerCapture(e.pointerId)}catch{}this._dialog.classList.add(`dragging`)}}_onPointerMove(e){if(!this._isDragging)return;let t=e.clientY-this._startY;this._lastDeltaY=t;let n=this._dialog.classList.contains(`expanded`),r=this._getMaxHeightPx();if(n){if(t>0){let e=this._sheetHeight-t;this._dialog.style.transform=``,this._dialog.style.height=`${Math.max(0,e)}px`}else{let e=this._sheetHeight-t*.2;this._dialog.style.transform=``,this._dialog.style.height=`${Math.min(r,e)}px`}}else if(t>0)this._dialog.style.transform=`translateY(${t}px)`,this._dialog.style.height=``;else{let e=this._sheetHeight-t;this._dialog.style.transform=``,this._dialog.style.height=`${Math.min(r,e)}px`}}_onPointerUp(e){if(!this._isDragging)return;let t=e.target;try{t&&t.hasPointerCapture?.(e.pointerId)&&t.releasePointerCapture(e.pointerId)}catch{}this._isDragging=!1,this._dialog.classList.remove(`dragging`);let n=typeof e.clientY==`number`&&e.clientY>0,r=n?e.clientY-this._startY:this._lastDeltaY;Math.abs(r)>5&&(this._justDragged=!0,setTimeout(()=>{this._justDragged=!1},50));let i=this._dialog.classList.contains(`expanded`),a=this._getMaxHeightPx(),o=this._defaultHeight||this._sheetHeight*.6||300,s=n&&typeof window<`u`&&e.clientY>=window.innerHeight-30;if(i){let e=this._sheetHeight-r;s||r>this._sheetHeight*.4||e<o-80||e<100?this._animateAndClose().then(e=>{e||(this._dialog.style.transform=``,this._dialog.style.height=``)}):e<(a+o)/2?(this._dialog.classList.remove(`expanded`),this._dialog.style.transform=``,this._dialog.style.height=``):(this._dialog.style.transform=``,this._dialog.style.height=``)}else if(r<0&&!s)this._sheetHeight-r>this._sheetHeight+80&&this._dialog.classList.add(`expanded`),this._dialog.style.transform=``,this._dialog.style.height=``;else{let e=Math.min(80,this._sheetHeight*.25);s||r>e?this._animateAndClose().then(e=>{e||(this._dialog.style.transform=``)}):this._dialog.style.transform=``}this._lastDeltaY=0}_onPointerCancel(e){this._isDragging&&this._onPointerUp(e)}_onLostPointerCapture(e){this._isDragging&&this._onPointerUp(e)}_onDialogClick(e){if(this._justDragged){this._justDragged=!1;return}this.modal&&e.target===this._dialog&&this._animateAndClose()}updated(e){if(super.updated(e),e.has(`expandedHeight`)&&this.style.setProperty(`--moni-bottom-sheet-expanded-height`,this.expandedHeight),e.has(`maxWidth`)&&this.style.setProperty(`--moni-bottom-sheet-max-width`,this.maxWidth||`100%`),e.has(`open`)&&(this.open?(this._isClosing=!1,this._isDragging=!1,this._lastDeltaY=0,this._dialog&&(this._dialog.classList.remove(`dragging`,`expanded`),this._dialog.style.transform=``,this._dialog.style.height=``),e.get(`open`)!==void 0&&Je(this,`moni-open`),this.positioning===`body`&&this.parentNode!==document.body&&(this._originalParent=this.parentNode,this._originalSibling=this.nextSibling,document.body.appendChild(this)),e.get(`open`)!==void 0&&setTimeout(()=>Je(this,`moni-opened`),300)):(this._isClosing=!1,this._isDragging=!1,this._lastDeltaY=0,this._dialog&&(this._dialog.classList.remove(`expanded`,`dragging`),this._dialog.style.transform=``,this._dialog.style.height=``),this.positioning===`body`&&this._originalParent&&this.parentNode===document.body&&(this._originalParent.insertBefore(this,this._originalSibling),this._originalParent=null,this._originalSibling=null)),this._dialog)){let e=this._dialog;if(this.open){if(this.modal&&typeof e.showModal==`function`){let t=!1;try{t=this._dialog.matches(`:modal`)}catch{t=!1}if(!t)try{e.showModal()}catch{}}else if(!this.modal&&typeof e.show==`function`)try{e.show()}catch{}else(this.modal&&typeof e.showModal!=`function`||!this.modal&&typeof e.show!=`function`)&&(this._dialog.open=!0)}else if(typeof e.close==`function`)try{e.close()}catch{}}}disconnectedCallback(){super.disconnectedCallback(),this.parentNode===document.body&&this.positioning===`body`&&this._originalParent&&this._originalParent.insertBefore(this,this._originalSibling)}static{this.styles=[G,g`
 			:host {
 				display: contents;
 			}
@@ -1131,6 +1131,10 @@ var MoniUI=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Modul
 				transform: translateY(0);
 			}
 
+			dialog::backdrop {
+				background-color: rgb(0 0 0 / 0.5);
+			}
+
 			dialog.fixed {
 				position: fixed;
 				inset: auto 0 0 0;
@@ -1228,6 +1232,7 @@ var MoniUI=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Modul
 			@pointermove=${this._onPointerMove}
 			@pointerup=${this._onPointerUp}
 			@pointercancel=${this._onPointerCancel}
+			@lostpointercapture=${this._onLostPointerCapture}
 		>
 			${this.handle?z`<div class="handle" aria-hidden="true"></div>`:B}
 			<header part="header">