tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(modal): enhance modal behavior and viewport handling for iOS devices

Browse Source
This commit is contained in:
ncoronel
2026-09-02 15:17:32 -03:00
parent 71ef09b413
commit 6f87aae939
6 changed files with 120 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/shared/components/modal-shell/modal-shell.component.ts
View File

@@ -19,6 +19,7 @@ import { ModalPresentation, ModalSize } from '../../../core/services/modal.servi
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ModalShellComponent {
private readonly shell = viewChild.required<ElementRef<HTMLElement>>('shell');
private readonly panel = viewChild.required<ElementRef<HTMLElement>>('panel');
readonly title = input<string | undefined>();
@@ -47,6 +48,28 @@ export class ModalShellComponent {
return this.title() ? this.titleId : null;
}
setVisualViewport(viewport: VisualViewport | null, layoutScrollX = 0, layoutScrollY = 0): void {
const shell = this.shell().nativeElement;
if (!viewport) {
shell.style.removeProperty('--modal-viewport-top');
shell.style.removeProperty('--modal-viewport-left');
shell.style.removeProperty('--modal-viewport-width');
shell.style.removeProperty('--modal-viewport-height');
return;
}
// pageTop/pageLeft are a useful fallback for WebKit versions that update
// offsetTop/offsetLeft one frame late after dismissing a native control.
const top = Math.max(viewport.offsetTop, viewport.pageTop - layoutScrollY);
const left = Math.max(viewport.offsetLeft, viewport.pageLeft - layoutScrollX);
shell.style.setProperty('--modal-viewport-top', `${top}px`);
shell.style.setProperty('--modal-viewport-left', `${left}px`);
shell.style.setProperty('--modal-viewport-width', `${viewport.width}px`);
shell.style.setProperty('--modal-viewport-height', `${viewport.height}px`);
}
focusInitialElement(): void {
const panel = this.panel().nativeElement;
const focusTarget = panel.querySelector<HTMLElement>(