Incorrect tooltips position when using placement with variation, i.e. bottom left

[lkachun9129]

Before opening an issue, please search for duplicates (opened and closed) https://github.com/valor-software/ngx-bootstrap/issues There's no need to open an issue here if you want to ask general question, use StackOverflow or Slack instead

Bug description: Incorrect tooltips position when using placement with variation, i.e. bottom left

Plunker/StackBlitz that reproduces the issue:

https://stackblitz.com/edit/stackblitz-starters-wqwuxs?file=app%2Fplacement.html

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 18 and 12

Angular: 18 and 17

Bootstrap: 4.5.3

Build system: Angular CLI, System.js, webpack, starter seed: Angular CLI

Expected behavior

When using the placement bottom left, the position may be auto adjusted even when there is sufficient space using the original placement.

After digging into the logic, I believe the root cause is the incorrect ordering of the modifiers. The order of modifiers should be determined based on _position. If the placement is bottom or top, shift should run before flip.

https://github.com/valor-software/ngx-bootstrap/blob/v18.0.2/src/positioning/ng-positioning.ts#L29

positionElements(
    hostElement: HTMLElement | null,
    targetElement: HTMLElement | null,
    position: string,
    appendToBody?: boolean,
    options?: Options
  ): Data | undefined {
    const _position = MapPlacementInToRL[position as keyof typeof MapPlacementInToRL];

    const chainOfModifiers = []; ;
    if (['bottom', 'top'].includes(_position.split(' ')[0]) {
        chainOfModifiers.push(...[shift, flip, preventOverflow, arrow]);
    } else {
        chainOfModifiers.push(...[flip, shift, preventOverflow, arrow]);
    }

    // skipped
}