Open dialog at non-zero drag offset

[jemand771]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Right now, dialogs open in the center of the screen but can be moved after creation using dialogRef.resetDrag({x: -500, y: 0}). However, calling this from the dialog's ngOnInit method will result in an unpleasant jump: The dialog opens in the center and gets transformed to the side a second or so later.

Expected behavior

I'd like a way to launch dialogs in non-center positions from the start. In its most rudimentary form, this could be an initial dragOffset as part of a dialog's config. In fact, there already is an input for this, but it's not exposed via the dialog config. (I tried doing that, but it didn't work. no idea why.)

Ideally, I'd want a setting with some common predefined positions. e.g. left, right, top, ... to automatically snap the dialog to a side of the screen. That way, I don't have to do any ugly screen and dialog size calculations to pass pixel offsets to resetDrag.

I've already tried to hack this in externally via css, like so:

/* open in top center */
div.ngneat-dialog-backdrop {
    align-items: start;
}

/* open in center left */
div.ngneat-dialog-backdrop {
    justify-content: left;
}

but that moves the whole draggable area, not just the dialog within it. -> dialog is draggable beyond the screen edge on one side but doesn't go all the way to the edge on the other side

Minimal reproduction of the problem with instructions

n/a

What is the motivation / use case for changing the behavior?

While it's common to open dialogs in the center (full user attention, sense of urgency), sometimes they're better fit in a different place. (e.g. close to the control element that triggered the dialog) To avoid having to hardcode positions, a simple "to the left" or "to the top" option would be ideal.

Environment

Angular version: 16.1.6


Browser: n/a
- [x] Chrome (desktop) version 115
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 102 (esr)
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues: n/a
- Node version: XX  
- Platform:  

Others: