@moni-labs/moni-ui 0.4.13 → 0.4.16
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/custom-elements.json +101 -81
- package/dist/browser/moni-ui.iife.min.js +1538 -1384
- package/dist/browser/moni-ui.iife.min.js.br +0 -0
- package/dist/browser/moni-ui.iife.min.js.gz +0 -0
- package/dist/browser/moni-ui.iife.min.js.map +1 -1
- package/dist/browser/moni-ui.min.js +2751 -2501
- package/dist/browser/moni-ui.min.js.br +0 -0
- package/dist/browser/moni-ui.min.js.gz +0 -0
- package/dist/browser/moni-ui.min.js.map +1 -1
- package/dist/cdn/chunks/{class-map-DsL1Jr2T.js → class-map-QyT9W7rZ.js} +1 -1
- package/dist/cdn/chunks/{decorate-DxJYS4gw.js → decorate-B7wZvwrn.js} +629 -543
- package/dist/cdn/chunks/if-defined-5hr_ccFw.js +1 -0
- package/dist/cdn/chunks/{live-D52JqeKf.js → live-Hm1Di_ND.js} +1 -1
- package/dist/cdn/components/moni-app-bar.js +1 -1
- package/dist/cdn/components/moni-badge.js +1 -1
- package/dist/cdn/components/moni-bottom-sheet.js +2 -1
- package/dist/cdn/components/moni-button-group.js +1 -1
- package/dist/cdn/components/moni-button-segment.js +1 -1
- package/dist/cdn/components/moni-button.js +1 -1
- package/dist/cdn/components/moni-card.js +1 -1
- package/dist/cdn/components/moni-carousel.js +1 -1
- package/dist/cdn/components/moni-checkbox.js +1 -1
- package/dist/cdn/components/moni-chip.js +1 -1
- package/dist/cdn/components/moni-color-field.js +1 -1
- package/dist/cdn/components/moni-context-menu.js +1 -1
- package/dist/cdn/components/moni-dialog.js +1 -1
- package/dist/cdn/components/moni-divider.js +1 -1
- package/dist/cdn/components/moni-expansion.js +1 -1
- package/dist/cdn/components/moni-fab-menu.js +1 -1
- package/dist/cdn/components/moni-fab.js +1 -1
- package/dist/cdn/components/moni-file-field.js +1 -1
- package/dist/cdn/components/moni-icon.js +1 -1
- package/dist/cdn/components/moni-list-item.js +1 -1
- package/dist/cdn/components/moni-list.js +1 -1
- package/dist/cdn/components/moni-loading-indicator.js +1 -1
- package/dist/cdn/components/moni-menu-item.js +1 -1
- package/dist/cdn/components/moni-menu.js +1 -1
- package/dist/cdn/components/moni-morph-modal.js +3 -2
- package/dist/cdn/components/moni-nav-item.js +1 -1
- package/dist/cdn/components/moni-nav.js +1 -1
- package/dist/cdn/components/moni-progress.js +1 -1
- package/dist/cdn/components/moni-radio.js +1 -1
- package/dist/cdn/components/moni-ripple.js +1 -1
- package/dist/cdn/components/moni-segmented-button.js +1 -1
- package/dist/cdn/components/moni-select-option.js +1 -1
- package/dist/cdn/components/moni-select.js +512 -473
- package/dist/cdn/components/moni-shape.js +1 -1
- package/dist/cdn/components/moni-side-sheet.js +1 -1
- package/dist/cdn/components/moni-slider.js +1 -1
- package/dist/cdn/components/moni-snackbar.js +1 -1
- package/dist/cdn/components/moni-split-button.js +1 -1
- package/dist/cdn/components/moni-step.js +1 -1
- package/dist/cdn/components/moni-stepper.js +1 -1
- package/dist/cdn/components/moni-switch.js +1 -1
- package/dist/cdn/components/moni-tab.js +1 -1
- package/dist/cdn/components/moni-tabs.js +1 -1
- package/dist/cdn/components/moni-text-field.js +122 -95
- package/dist/cdn/components/moni-textarea.js +52 -52
- package/dist/cdn/components/moni-time-picker.js +1 -1
- package/dist/cdn/components/moni-toolbar.js +1 -1
- package/dist/cdn/components/moni-tooltip.js +1 -1
- package/dist/cdn/components/moni-typography.js +1 -1
- package/dist/cdn/importmap.json +98 -98
- package/dist/components/_base/field-styles.d.ts.map +1 -1
- package/dist/components/_base/field-styles.js +662 -576
- package/dist/components/moni-bottom-sheet.d.ts +19 -5
- package/dist/components/moni-bottom-sheet.d.ts.map +1 -1
- package/dist/components/moni-bottom-sheet.js +111 -30
- package/dist/components/moni-morph-modal.d.ts +10 -0
- package/dist/components/moni-morph-modal.d.ts.map +1 -1
- package/dist/components/moni-morph-modal.js +323 -217
- package/dist/components/moni-select.d.ts +16 -16
- package/dist/components/moni-select.d.ts.map +1 -1
- package/dist/components/moni-select.js +797 -727
- package/dist/components/moni-text-field.d.ts +15 -15
- package/dist/components/moni-text-field.d.ts.map +1 -1
- package/dist/components/moni-text-field.js +224 -180
- package/dist/components/moni-textarea.d.ts +13 -13
- package/dist/components/moni-textarea.d.ts.map +1 -1
- package/dist/components/moni-textarea.js +127 -122
- package/docs/api.json +109 -89
- package/docs/assets/moni-color-field/shape--square.png +0 -0
- package/docs/assets/moni-file-field/shape--square.png +0 -0
- package/docs/assets/moni-morph-modal/autoHeight--false.png +0 -0
- package/docs/assets/moni-morph-modal/autoHeight--true.png +0 -0
- package/docs/components/bottom-sheet.md +2 -1
- package/docs/components/morph-modal.md +16 -7
- package/docs/components/select.md +74 -74
- package/docs/components/text-field.md +75 -66
- package/docs/components/textarea.md +51 -51
- package/docs/llms.txt +3 -3
- package/package.json +1 -1
- package/src/components/_base/field-styles.ts +723 -637
- package/src/components/moni-bottom-sheet.test.ts +331 -0
- package/src/components/moni-bottom-sheet.ts +117 -29
- package/src/components/moni-morph-modal.test.ts +490 -413
- package/src/components/moni-morph-modal.ts +2274 -2162
- package/src/components/moni-select.test.ts +489 -466
- package/src/components/moni-select.ts +1963 -1815
- package/src/components/moni-text-field.test.ts +366 -342
- package/src/components/moni-text-field.ts +717 -645
- package/src/components/moni-textarea.test.ts +201 -197
- package/src/components/moni-textarea.ts +476 -460
- package/dist/cdn/chunks/if-defined-DdzvcoI7.js +0 -1
|
@@ -144,11 +144,20 @@ export declare class MoniBottomSheet extends MoniElement {
|
|
|
144
144
|
private _dialog;
|
|
145
145
|
private _isDragging;
|
|
146
146
|
private _startY;
|
|
147
|
-
private
|
|
147
|
+
private _lastDeltaY;
|
|
148
148
|
private _sheetHeight;
|
|
149
149
|
private _defaultHeight;
|
|
150
150
|
private _justDragged;
|
|
151
151
|
private _skipRequestClose;
|
|
152
|
+
private _isClosing;
|
|
153
|
+
/**
|
|
154
|
+
* Abre el bottom sheet.
|
|
155
|
+
*/
|
|
156
|
+
show(): void;
|
|
157
|
+
/**
|
|
158
|
+
* Cierra el bottom sheet ejecutando la animación fluida hacia abajo.
|
|
159
|
+
*/
|
|
160
|
+
close(): Promise<boolean>;
|
|
152
161
|
willUpdate(changed: Map<string, unknown>): void;
|
|
153
162
|
private _animateAndClose;
|
|
154
163
|
/**
|
|
@@ -173,15 +182,20 @@ export declare class MoniBottomSheet extends MoniElement {
|
|
|
173
182
|
/**
|
|
174
183
|
* Finaliza la interacción de arrastre, evaluando si el bottom-sheet debe
|
|
175
184
|
* expandirse, regresar a su estado original o cerrarse completamente según la
|
|
176
|
-
* inercia o la
|
|
185
|
+
* inercia, la distancia arrastrada o si se soltó fuera/hacia la parte inferior de la pantalla.
|
|
177
186
|
*/
|
|
178
187
|
private _onPointerUp;
|
|
179
188
|
/**
|
|
180
|
-
*
|
|
181
|
-
*
|
|
182
|
-
*
|
|
189
|
+
* Maneja la cancelación del puntero o interrupción del SO.
|
|
190
|
+
* Si el usuario ya lo había arrastrado hacia abajo o hacia fuera de la pantalla,
|
|
191
|
+
* evalúa el cierre en lugar de simplemente cancelar y dejar la hoja colgada.
|
|
183
192
|
*/
|
|
184
193
|
private _onPointerCancel;
|
|
194
|
+
/**
|
|
195
|
+
* Se ejecuta cuando se pierde la captura de puntero (por ejemplo al arrastrar fuera
|
|
196
|
+
* del viewport del navegador o perder el foco de la ventana).
|
|
197
|
+
*/
|
|
198
|
+
private _onLostPointerCapture;
|
|
185
199
|
/**
|
|
186
200
|
* Handler de clicks en la superficie del modal (Backdrop).
|
|
187
201
|
* Si el clic cae exactamente en el fondo (`this._dialog`) y no en el contenedor de
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"moni-bottom-sheet.d.ts","sourceRoot":"","sources":["../../src/components/moni-bottom-sheet.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAC/C;;;;;;;OAOG;IACyC,IAAI,UAAS;IAEzD;;;;;;;;;OASG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAY;IAEvD;;;;;OAKG;IACyC,KAAK,UAAQ;IAEzD;;;;OAIG;IAC0B,KAAK,SAAM;IAExC;;;;;;;;;OASG;IACyC,MAAM,UAAS;IAE3D;;;;;;;;;;OAUG;IAEH,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAEhE;;;;;;;;OAQG;IAEH,cAAc,SAAS;IAEvB;;;;;;;;OAQG;IAEH,QAAQ,SAAM;IAEd;;;OAGG;IACH,OAAO,CAAC,eAAe,CAAqB;IAE5C;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,wDAAwD;IACvC,OAAO,CAAC,OAAO,CAAqB;IACrD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"moni-bottom-sheet.d.ts","sourceRoot":"","sources":["../../src/components/moni-bottom-sheet.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAC/C;;;;;;;OAOG;IACyC,IAAI,UAAS;IAEzD;;;;;;;;;OASG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAY;IAEvD;;;;;OAKG;IACyC,KAAK,UAAQ;IAEzD;;;;OAIG;IAC0B,KAAK,SAAM;IAExC;;;;;;;;;OASG;IACyC,MAAM,UAAS;IAE3D;;;;;;;;;;OAUG;IAEH,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAEhE;;;;;;;;OAQG;IAEH,cAAc,SAAS;IAEvB;;;;;;;;OAQG;IAEH,QAAQ,SAAM;IAEd;;;OAGG;IACH,OAAO,CAAC,eAAe,CAAqB;IAE5C;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,wDAAwD;IACvC,OAAO,CAAC,OAAO,CAAqB;IACrD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,UAAU,CAAS;IAE3B;;OAEG;IACH,IAAI;IAYJ;;OAEG;IACH,KAAK;IAII,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;YAiBnC,gBAAgB;IA4C9B;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IAcvB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IA2BtB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAmCtB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IA6FpB;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAM7B;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAYtB;;;;;;;OAOG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAgD9C;;;;OAIG;IACM,oBAAoB;IAO7B,OAAgB,MAAM,4BAiIpB;IAEF;;;;;;;;;;;;;;;;;;;OAmBG;IACM,MAAM;CAuBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}
|
|
@@ -153,11 +153,32 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
153
153
|
this._originalSibling = null;
|
|
154
154
|
this._isDragging = false;
|
|
155
155
|
this._startY = 0;
|
|
156
|
-
this.
|
|
156
|
+
this._lastDeltaY = 0;
|
|
157
157
|
this._sheetHeight = 0;
|
|
158
158
|
this._defaultHeight = 0;
|
|
159
159
|
this._justDragged = false;
|
|
160
160
|
this._skipRequestClose = false;
|
|
161
|
+
this._isClosing = false;
|
|
162
|
+
}
|
|
163
|
+
/**
|
|
164
|
+
* Abre el bottom sheet.
|
|
165
|
+
*/
|
|
166
|
+
show() {
|
|
167
|
+
this._isClosing = false;
|
|
168
|
+
this._isDragging = false;
|
|
169
|
+
this._lastDeltaY = 0;
|
|
170
|
+
if (this._dialog) {
|
|
171
|
+
this._dialog.classList.remove('dragging', 'expanded');
|
|
172
|
+
this._dialog.style.transform = '';
|
|
173
|
+
this._dialog.style.height = '';
|
|
174
|
+
}
|
|
175
|
+
this.open = true;
|
|
176
|
+
}
|
|
177
|
+
/**
|
|
178
|
+
* Cierra el bottom sheet ejecutando la animación fluida hacia abajo.
|
|
179
|
+
*/
|
|
180
|
+
close() {
|
|
181
|
+
return this._animateAndClose();
|
|
161
182
|
}
|
|
162
183
|
willUpdate(changed) {
|
|
163
184
|
if (changed.has('open') && this.open !== changed.get('open')) {
|
|
@@ -177,12 +198,18 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
177
198
|
}
|
|
178
199
|
}
|
|
179
200
|
async _animateAndClose() {
|
|
201
|
+
if (this._isClosing)
|
|
202
|
+
return false;
|
|
203
|
+
if (!this.open)
|
|
204
|
+
return false;
|
|
205
|
+
this._isClosing = true;
|
|
180
206
|
this._skipRequestClose = true;
|
|
181
207
|
const allowed = emitMoniEvent(this, 'moni-request-close', { cancelable: true });
|
|
182
208
|
this._skipRequestClose = false;
|
|
183
|
-
if (!allowed)
|
|
209
|
+
if (!allowed) {
|
|
210
|
+
this._isClosing = false;
|
|
184
211
|
return false;
|
|
185
|
-
|
|
212
|
+
}
|
|
186
213
|
emitMoniEvent(this, 'moni-close');
|
|
187
214
|
this._dialog.classList.remove('expanded');
|
|
188
215
|
this._dialog.style.transform = 'translateY(100%)';
|
|
@@ -195,10 +222,18 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
195
222
|
this._dialog.addEventListener('transitionend', onEnd);
|
|
196
223
|
setTimeout(onEnd, 300);
|
|
197
224
|
});
|
|
198
|
-
this.
|
|
225
|
+
this._isClosing = false;
|
|
226
|
+
this._isDragging = false;
|
|
227
|
+
this._lastDeltaY = 0;
|
|
228
|
+
if (this._dialog) {
|
|
229
|
+
this._dialog.classList.remove('dragging', 'expanded');
|
|
230
|
+
this._dialog.style.transform = '';
|
|
231
|
+
this._dialog.style.height = '';
|
|
232
|
+
}
|
|
199
233
|
this._skipRequestClose = true;
|
|
200
234
|
this.open = false;
|
|
201
235
|
this._skipRequestClose = false;
|
|
236
|
+
this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));
|
|
202
237
|
emitMoniEvent(this, 'moni-closed');
|
|
203
238
|
return true;
|
|
204
239
|
}
|
|
@@ -234,14 +269,22 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
234
269
|
this._isDragging = true;
|
|
235
270
|
this._startY = e.clientY; // Almacenamos la coordenada inicial Y para calcular el delta luego
|
|
236
271
|
this._sheetHeight = this._dialog.getBoundingClientRect().height; // Capturamos la altura actual
|
|
237
|
-
this.
|
|
272
|
+
this._lastDeltaY = 0;
|
|
238
273
|
const isExpanded = this._dialog.classList.contains('expanded');
|
|
239
274
|
// Si no estaba expandido previamente, guardamos su altura por defecto para usarla como punto de retorno.
|
|
240
275
|
if (!isExpanded) {
|
|
241
276
|
this._defaultHeight = this._sheetHeight;
|
|
242
277
|
}
|
|
278
|
+
else if (!this._defaultHeight) {
|
|
279
|
+
this._defaultHeight = Math.min(this._sheetHeight * 0.6, 384);
|
|
280
|
+
}
|
|
243
281
|
// setPointerCapture enruta todos los eventos subsecuentes a este target
|
|
244
|
-
|
|
282
|
+
try {
|
|
283
|
+
target.setPointerCapture(e.pointerId);
|
|
284
|
+
}
|
|
285
|
+
catch {
|
|
286
|
+
// Ignorar si el navegador ya maneja el puntero de forma nativa
|
|
287
|
+
}
|
|
245
288
|
this._dialog.classList.add('dragging'); // Desactiva las transiciones CSS para un seguimiento suave 1:1
|
|
246
289
|
}
|
|
247
290
|
/**
|
|
@@ -254,6 +297,7 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
254
297
|
return;
|
|
255
298
|
// Diferencia en píxeles desde donde se inició el click
|
|
256
299
|
const deltaY = e.clientY - this._startY;
|
|
300
|
+
this._lastDeltaY = deltaY;
|
|
257
301
|
const isExpanded = this._dialog.classList.contains('expanded');
|
|
258
302
|
const maxHeight = this._getMaxHeightPx();
|
|
259
303
|
if (isExpanded) {
|
|
@@ -273,7 +317,6 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
273
317
|
else {
|
|
274
318
|
if (deltaY > 0) {
|
|
275
319
|
// Arrastrando hacia abajo desde su estado inicial: lo empujamos visualmente hacia abajo (translate)
|
|
276
|
-
this._currentTranslationY = deltaY;
|
|
277
320
|
this._dialog.style.transform = `translateY(${deltaY}px)`;
|
|
278
321
|
this._dialog.style.height = '';
|
|
279
322
|
}
|
|
@@ -288,16 +331,25 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
288
331
|
/**
|
|
289
332
|
* Finaliza la interacción de arrastre, evaluando si el bottom-sheet debe
|
|
290
333
|
* expandirse, regresar a su estado original o cerrarse completamente según la
|
|
291
|
-
* inercia o la
|
|
334
|
+
* inercia, la distancia arrastrada o si se soltó fuera/hacia la parte inferior de la pantalla.
|
|
292
335
|
*/
|
|
293
336
|
_onPointerUp(e) {
|
|
294
337
|
if (!this._isDragging)
|
|
295
338
|
return;
|
|
296
339
|
const target = e.target;
|
|
297
|
-
|
|
340
|
+
try {
|
|
341
|
+
if (target && target.hasPointerCapture?.(e.pointerId)) {
|
|
342
|
+
target.releasePointerCapture(e.pointerId);
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
catch {
|
|
346
|
+
// Ignorar si la captura ya fue liberada o perdida por el navegador
|
|
347
|
+
}
|
|
298
348
|
this._isDragging = false;
|
|
299
349
|
this._dialog.classList.remove('dragging'); // Reactivamos las transiciones CSS
|
|
300
|
-
|
|
350
|
+
// Evaluamos la posición exacta al momento de soltar
|
|
351
|
+
const hasValidY = typeof e.clientY === 'number' && e.clientY > 0;
|
|
352
|
+
const deltaY = hasValidY ? (e.clientY - this._startY) : this._lastDeltaY;
|
|
301
353
|
// Si se movió más de 5px, bloqueamos clics accidentales para evitar disparar eventos subyacentes
|
|
302
354
|
if (Math.abs(deltaY) > 5) {
|
|
303
355
|
this._justDragged = true;
|
|
@@ -307,11 +359,18 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
307
359
|
}
|
|
308
360
|
const isExpanded = this._dialog.classList.contains('expanded');
|
|
309
361
|
const maxHeight = this._getMaxHeightPx();
|
|
362
|
+
const defaultHeight = this._defaultHeight || (this._sheetHeight * 0.6) || 300;
|
|
363
|
+
// Solo se considera off-screen si al SOLTAR el puntero se encuentra en o más allá del límite inferior
|
|
364
|
+
const isOffScreenBottom = hasValidY && typeof window !== 'undefined' && e.clientY >= (window.innerHeight - 30);
|
|
310
365
|
if (isExpanded) {
|
|
311
366
|
// Evaluamos la altura final tras soltar el ratón/dedo
|
|
312
367
|
const finalHeight = this._sheetHeight - deltaY;
|
|
313
|
-
|
|
314
|
-
|
|
368
|
+
const shouldClose = isOffScreenBottom ||
|
|
369
|
+
deltaY > this._sheetHeight * 0.4 ||
|
|
370
|
+
finalHeight < (defaultHeight - 80) ||
|
|
371
|
+
finalHeight < 100;
|
|
372
|
+
if (shouldClose) {
|
|
373
|
+
// Si se soltó significativamente hacia abajo o fuera de pantalla, lo cerramos
|
|
315
374
|
this._animateAndClose().then((closed) => {
|
|
316
375
|
if (!closed) {
|
|
317
376
|
// Si se canceló el evento, regresamos a su lugar
|
|
@@ -320,20 +379,20 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
320
379
|
}
|
|
321
380
|
});
|
|
322
381
|
}
|
|
323
|
-
else if (finalHeight < (maxHeight +
|
|
382
|
+
else if (finalHeight < (maxHeight + defaultHeight) / 2) {
|
|
324
383
|
// Si se soltó a medio camino, lo colapsamos a su altura normal
|
|
325
384
|
this._dialog.classList.remove('expanded');
|
|
326
385
|
this._dialog.style.transform = '';
|
|
327
386
|
this._dialog.style.height = '';
|
|
328
387
|
}
|
|
329
388
|
else {
|
|
330
|
-
// Si no se arrastró
|
|
389
|
+
// Si se subió de nuevo hacia arriba o no se arrastró suficiente, retorna a estado expandido (snap back)
|
|
331
390
|
this._dialog.style.transform = '';
|
|
332
391
|
this._dialog.style.height = '';
|
|
333
392
|
}
|
|
334
393
|
}
|
|
335
394
|
else {
|
|
336
|
-
if (deltaY < 0) {
|
|
395
|
+
if (deltaY < 0 && !isOffScreenBottom) {
|
|
337
396
|
// Evaluamos el arrastre hacia arriba desde el estado colapsado
|
|
338
397
|
const finalHeight = this._sheetHeight - deltaY;
|
|
339
398
|
if (finalHeight > this._sheetHeight + 80) {
|
|
@@ -344,8 +403,11 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
344
403
|
this._dialog.style.height = '';
|
|
345
404
|
}
|
|
346
405
|
else {
|
|
347
|
-
// Evaluamos el
|
|
348
|
-
|
|
406
|
+
// Evaluamos si al soltar superó el umbral de descarte o se soltó fuera de la pantalla
|
|
407
|
+
const threshold = Math.min(80, this._sheetHeight * 0.25);
|
|
408
|
+
const shouldClose = isOffScreenBottom ||
|
|
409
|
+
deltaY > threshold;
|
|
410
|
+
if (shouldClose) {
|
|
349
411
|
this._animateAndClose().then((closed) => {
|
|
350
412
|
if (!closed) {
|
|
351
413
|
this._dialog.style.transform = '';
|
|
@@ -353,26 +415,31 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
353
415
|
});
|
|
354
416
|
}
|
|
355
417
|
else {
|
|
356
|
-
//
|
|
418
|
+
// Si el usuario bajó pero subió de nuevo antes de soltar (o no superó el umbral), regresa a abierto
|
|
357
419
|
this._dialog.style.transform = '';
|
|
358
420
|
}
|
|
359
421
|
}
|
|
360
422
|
}
|
|
423
|
+
this._lastDeltaY = 0;
|
|
361
424
|
}
|
|
362
425
|
/**
|
|
363
|
-
*
|
|
364
|
-
*
|
|
365
|
-
*
|
|
426
|
+
* Maneja la cancelación del puntero o interrupción del SO.
|
|
427
|
+
* Si el usuario ya lo había arrastrado hacia abajo o hacia fuera de la pantalla,
|
|
428
|
+
* evalúa el cierre en lugar de simplemente cancelar y dejar la hoja colgada.
|
|
366
429
|
*/
|
|
367
430
|
_onPointerCancel(e) {
|
|
368
|
-
if (
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
431
|
+
if (this._isDragging) {
|
|
432
|
+
this._onPointerUp(e);
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
/**
|
|
436
|
+
* Se ejecuta cuando se pierde la captura de puntero (por ejemplo al arrastrar fuera
|
|
437
|
+
* del viewport del navegador o perder el foco de la ventana).
|
|
438
|
+
*/
|
|
439
|
+
_onLostPointerCapture(e) {
|
|
440
|
+
if (this._isDragging) {
|
|
441
|
+
this._onPointerUp(e);
|
|
442
|
+
}
|
|
376
443
|
}
|
|
377
444
|
/**
|
|
378
445
|
* Handler de clicks en la superficie del modal (Backdrop).
|
|
@@ -410,6 +477,14 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
410
477
|
}
|
|
411
478
|
if (changed.has('open')) {
|
|
412
479
|
if (this.open) {
|
|
480
|
+
this._isClosing = false;
|
|
481
|
+
this._isDragging = false;
|
|
482
|
+
this._lastDeltaY = 0;
|
|
483
|
+
if (this._dialog) {
|
|
484
|
+
this._dialog.classList.remove('dragging', 'expanded');
|
|
485
|
+
this._dialog.style.transform = '';
|
|
486
|
+
this._dialog.style.height = '';
|
|
487
|
+
}
|
|
413
488
|
if (changed.get('open') !== undefined) {
|
|
414
489
|
emitMoniEvent(this, 'moni-open');
|
|
415
490
|
}
|
|
@@ -424,8 +499,13 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
424
499
|
}
|
|
425
500
|
}
|
|
426
501
|
else {
|
|
502
|
+
this._isClosing = false;
|
|
503
|
+
this._isDragging = false;
|
|
504
|
+
this._lastDeltaY = 0;
|
|
427
505
|
if (this._dialog) {
|
|
428
|
-
this._dialog.classList.remove('expanded');
|
|
506
|
+
this._dialog.classList.remove('expanded', 'dragging');
|
|
507
|
+
this._dialog.style.transform = '';
|
|
508
|
+
this._dialog.style.height = '';
|
|
429
509
|
}
|
|
430
510
|
if (this.positioning === 'body' && this._originalParent && this.parentNode === document.body) {
|
|
431
511
|
this._originalParent.insertBefore(this, this._originalSibling);
|
|
@@ -608,6 +688,7 @@ let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
|
|
|
608
688
|
@pointermove=${this._onPointerMove}
|
|
609
689
|
@pointerup=${this._onPointerUp}
|
|
610
690
|
@pointercancel=${this._onPointerCancel}
|
|
691
|
+
@lostpointercapture=${this._onLostPointerCapture}
|
|
611
692
|
>
|
|
612
693
|
${this.handle ? html `<div class="handle" aria-hidden="true"></div>` : nothing}
|
|
613
694
|
<header part="header">
|
|
@@ -92,6 +92,8 @@ export declare class MoniMorphModal extends MoniElement {
|
|
|
92
92
|
* @type {boolean}
|
|
93
93
|
*/
|
|
94
94
|
autoSize: boolean;
|
|
95
|
+
/** Ajusta sólo la altura al contenido, sin superar expanded-height. */
|
|
96
|
+
autoHeight: boolean;
|
|
95
97
|
/** Fuerza al modal expandido a ocupar todo el viewport. */
|
|
96
98
|
fullscreen: boolean;
|
|
97
99
|
/** Activa fullscreen únicamente cuando el viewport no supera el breakpoint configurado. */
|
|
@@ -122,6 +124,8 @@ export declare class MoniMorphModal extends MoniElement {
|
|
|
122
124
|
private _originFallbacks;
|
|
123
125
|
private static _openStack;
|
|
124
126
|
private _targetStylesCache;
|
|
127
|
+
private static _scrollLockOwners;
|
|
128
|
+
private static _scrollLockSnapshot;
|
|
125
129
|
/**
|
|
126
130
|
* Handler encapsulado para el evento click en el trigger.
|
|
127
131
|
* Dispara la animación de apertura.
|
|
@@ -146,6 +150,10 @@ export declare class MoniMorphModal extends MoniElement {
|
|
|
146
150
|
* imperativamente la animación de apertura (`show`) o cierre (`hide`).
|
|
147
151
|
*/
|
|
148
152
|
updated(changed: Map<string, unknown>): void;
|
|
153
|
+
private _shouldLockDocumentScroll;
|
|
154
|
+
private _syncDocumentScrollLock;
|
|
155
|
+
private _acquireDocumentScrollLock;
|
|
156
|
+
private _releaseDocumentScrollLock;
|
|
149
157
|
/**
|
|
150
158
|
* Busca en el DOM el elemento que dispara el modal (el trigger) basándose en la propiedad `target`.
|
|
151
159
|
* Establece el listener de click que iniciará la animación de morphing.
|
|
@@ -179,6 +187,7 @@ export declare class MoniMorphModal extends MoniElement {
|
|
|
179
187
|
private _captureOriginFallbacks;
|
|
180
188
|
private _getComposedParent;
|
|
181
189
|
private _resolveClosingTarget;
|
|
190
|
+
private _intersectsViewport;
|
|
182
191
|
private _debugMorph;
|
|
183
192
|
private _isUsableClosingTarget;
|
|
184
193
|
toggle(): void;
|
|
@@ -226,6 +235,7 @@ export declare class MoniMorphModal extends MoniElement {
|
|
|
226
235
|
private _applyRect;
|
|
227
236
|
private _usesFullscreen;
|
|
228
237
|
private _computeFinalRect;
|
|
238
|
+
private _measureNaturalSize;
|
|
229
239
|
private _parseSize;
|
|
230
240
|
static styles: import("lit").CSSResult[];
|
|
231
241
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"moni-morph-modal.d.ts","sourceRoot":"","sources":["../../src/components/moni-morph-modal.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAI7D,OAAO,gBAAgB,CAAC;AAQxB,KAAK,SAAS,GACX,QAAQ,GACR,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,OAAO,GACP,aAAa,GACb,WAAW,GACX,iBAAiB,GACjB,cAAc,GACd,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,mBAAmB,GACnB,oBAAoB,GACpB,sBAAsB,GACtB,uBAAuB,CAAC;AA4E3B,qBACa,cAAe,SAAQ,WAAW;IAC9C;;;;OAIG;IAC0B,MAAM,SAAM;IAEzC;;;;OAIG;IAC6D,IAAI,UAAS;IAE7E;;;;OAIG;IAC6D,KAAK,UAAQ;IAE7E;;;;OAIG;IAC0B,SAAS,EAAE,SAAS,CAAY;IAE7D;;;;OAIG;IACuD,aAAa,SAC9D;IAET;;;;OAIG;IACwD,cAAc,SAChE;IAET;;;;OAIG;IAEH,mBAAmB,UAAQ;IAE3B;;;;OAIG;IAEH,UAAU,UAAQ;IAElB;;;OAGG;IAEH,eAAe,UAAS;IAExB;;;OAGG;IAEH,UAAU,UAAS;IAEnB;;;OAGG;IAEH,kBAAkB,SAAM;IAExB;;;;OAIG;IAEH,WAAW,UAAQ;IAEnB;;;OAGG;IAEH,UAAU,UAAS;IAEnB;;;OAGG;IAEH,WAAW,UAAS;IAEpB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB,2DAA2D;IAE3D,UAAU,UAAS;IAEnB,2FAA2F;IAE3F,oBAAoB,UAAS;IAE7B,iFAAiF;IAEjF,oBAAoB,SAAO;IAE3B;;;OAGG;IAEH,WAAW,UAAS;IAEpB,iFAAiF;IAEjF,KAAK,UAAS;IAEG,OAAO,CAAC,MAAM,CAAkB;IAC1B,OAAO,CAAC,MAAM,CAAkB;IACnC,OAAO,CAAC,SAAS,CAAkB;IACtC,OAAO,CAAC,OAAO,CAAe;IAEtC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,gBAAgB,CAAS;IAE1C,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,mBAAmB,CAAS;IACpC,OAAO,CAAC,OAAO,CAAO;IACtB,OAAO,CAAC,SAAS,CAA6C;IAC9D,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,MAAM,CAAC,UAAU,CAAwB;IACjD,OAAO,CAAC,kBAAkB,CAA8D;
|
|
1
|
+
{"version":3,"file":"moni-morph-modal.d.ts","sourceRoot":"","sources":["../../src/components/moni-morph-modal.ts"],"names":[],"mappings":"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"}
|