mn-angular-lib 1.0.105 → 1.0.106
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/package.json
CHANGED
|
@@ -10,10 +10,7 @@
|
|
|
10
10
|
display: flex;
|
|
11
11
|
align-items: center;
|
|
12
12
|
justify-content: center;
|
|
13
|
-
|
|
14
|
-
with the soft keyboard (see the `--keyboard-height` handling in the mobile-sheet block). */
|
|
15
|
-
transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, opacity 0.3s ease-in-out,
|
|
16
|
-
padding-bottom 0.25s ease-out;
|
|
13
|
+
transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
|
17
14
|
}
|
|
18
15
|
|
|
19
16
|
:host(.is-stacked) {
|
|
@@ -120,24 +117,17 @@
|
|
|
120
117
|
@media (max-width: 639.98px) {
|
|
121
118
|
:host(.mobile-sheet) {
|
|
122
119
|
align-items: flex-end;
|
|
123
|
-
/* Lift the whole sheet above the on-screen keyboard so focused fields stay visible.
|
|
124
|
-
On iOS the WKWebView does NOT resize when the keyboard opens (Capacitor `resize: none`,
|
|
125
|
-
chosen to avoid a relayout black-flash), so a bottom-anchored sheet would sit behind the
|
|
126
|
-
keyboard and no amount of inner scrolling can raise a low/last field above it — the sheet
|
|
127
|
-
itself must move up. Insetting this flex container by `--keyboard-height` (which the host
|
|
128
|
-
app publishes on iOS; 0 on web/Android where the view resizes natively) pushes the
|
|
129
|
-
flex-end-aligned sheet up by exactly the keyboard height. It's read as a plain CSS var,
|
|
130
|
-
so the library keeps no dependency on Capacitor. */
|
|
131
|
-
padding-bottom: var(--keyboard-height, 0px);
|
|
132
120
|
}
|
|
133
121
|
|
|
134
122
|
:host(.mobile-sheet) .modal-container {
|
|
135
123
|
width: 100%;
|
|
136
124
|
max-width: 100%;
|
|
137
|
-
/* Cap the sheet
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
125
|
+
/* Cap the sheet at 92vh. The soft keyboard OVERLAYS the lower part of the sheet rather
|
|
126
|
+
than lifting it (on iOS the WKWebView does not resize — Capacitor `resize: none` — so
|
|
127
|
+
there is nothing to lift into): the sheet stays anchored at the bottom and its inner
|
|
128
|
+
scroll area scrolls the focused field up above the keyboard (see the `.mn-keyboard-open`
|
|
129
|
+
growth rule below plus `scroll-padding-bottom` in the host app's styles.css). */
|
|
130
|
+
max-height: 92vh;
|
|
141
131
|
/* Keep the footer / last content clear of the iOS home indicator. The sheet
|
|
142
132
|
background extends into the inset so it reads as one continuous surface.
|
|
143
133
|
The container is border-box (Tailwind preflight), so this padding sits inside
|
|
@@ -148,6 +138,20 @@
|
|
|
148
138
|
animation: slideUpIn 0.45s var(--mn-sheet-ease);
|
|
149
139
|
}
|
|
150
140
|
|
|
141
|
+
/* While the soft keyboard is open (the host app adds `.mn-keyboard-open` to <html> on iOS),
|
|
142
|
+
grow the sheet to the full capped height. The keyboard overlays the lower part, so a
|
|
143
|
+
SHORT form would otherwise sit entirely behind the keyboard with no room to scroll the
|
|
144
|
+
focused field into view — pinning the height to 92vh guarantees content above the keyboard
|
|
145
|
+
for the inner scroll (with its `--keyboard-height` scroll-padding) to reveal the field.
|
|
146
|
+
Read as a plain class/var, so the library keeps no dependency on Capacitor.
|
|
147
|
+
`!important` is required to beat the inline `[style.height]` the shell binds for FULL-size or
|
|
148
|
+
explicit `sizeHeight` sheets (an inline style otherwise always wins over a stylesheet rule,
|
|
149
|
+
leaving a short fixed-height sheet stuck behind the overlaying keyboard). A FULL (95vh) sheet
|
|
150
|
+
is capped to 92vh while the keyboard is open, which is fine. */
|
|
151
|
+
:host-context(.mn-keyboard-open).mobile-sheet .modal-container {
|
|
152
|
+
height: 92vh !important;
|
|
153
|
+
}
|
|
154
|
+
|
|
151
155
|
/* Override whichever anim-* open animation was selected */
|
|
152
156
|
:host(.mobile-sheet).anim-slide .modal-container,
|
|
153
157
|
:host(.mobile-sheet).anim-fade .modal-container,
|