From 60a796ea48b17a4e8829b8782aaddb569534c7c4 Mon Sep 17 00:00:00 2001
From: Sam <github.yfu7s@simplelogin.com>
Date: Mon, 22 May 2023 03:59:53 +1000
Subject: [PATCH] feat(pagination-nav): add `tooltipPosition` prop (#1733)

* Add `tooltipPosition` to `PaginationNav` per #1656

* Rebuild test

* Update description in documentation

Co-authored-by: Enrico Sacchetti <esacchetti@gmail.com>

* chore: update docs

---------

Co-authored-by: Samuel Janda <hi@simpleprogramming.com.au>
Co-authored-by: Enrico Sacchetti <esacchetti@gmail.com>
Co-authored-by: Enrico Sacchetti <enrico@theetrain.ca>
---
 COMPONENT_INDEX.md                            | 17 +++++++++--------
 docs/src/COMPONENT_API.json                   | 12 ++++++++++++
 docs/src/pages/components/PaginationNav.svx   |  8 +++++++-
 src/PaginationNav/PaginationNav.svelte        | 18 ++++++++++++++++--
 types/PaginationNav/PaginationNav.svelte.d.ts |  6 ++++++
 5 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 8120fca4..e41dfdc5 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2696,14 +2696,15 @@ None.
 
 ### Props
 
-| Prop name    | Required | Kind             | Reactive | Type                 | Default value                | Description                               |
-| :----------- | :------- | :--------------- | :------- | -------------------- | ---------------------------- | ----------------------------------------- |
-| page         | No       | <code>let</code> | Yes      | <code>number</code>  | <code>1</code>               | Specify the current page index            |
-| total        | No       | <code>let</code> | No       | <code>number</code>  | <code>10</code>              | Specify the total number of pages         |
-| shown        | No       | <code>let</code> | No       | <code>number</code>  | <code>10</code>              | Specify the total number of pages to show |
-| loop         | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>           | Set to `true` to loop the navigation      |
-| forwardText  | No       | <code>let</code> | No       | <code>string</code>  | <code>"Next page"</code>     | Specify the forward button text           |
-| backwardText | No       | <code>let</code> | No       | <code>string</code>  | <code>"Previous page"</code> | Specify the backward button text          |
+| Prop name       | Required | Kind             | Reactive | Type                                                                                             | Default value                | Description                                                         |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------- |
+| page            | No       | <code>let</code> | Yes      | <code>number</code>                                                                              | <code>1</code>               | Specify the current page index                                      |
+| total           | No       | <code>let</code> | No       | <code>number</code>                                                                              | <code>10</code>              | Specify the total number of pages                                   |
+| shown           | No       | <code>let</code> | No       | <code>number</code>                                                                              | <code>10</code>              | Specify the total number of pages to show                           |
+| loop            | No       | <code>let</code> | No       | <code>boolean</code>                                                                             | <code>false</code>           | Set to `true` to loop the navigation                                |
+| forwardText     | No       | <code>let</code> | No       | <code>string</code>                                                                              | <code>"Next page"</code>     | Specify the forward button text                                     |
+| backwardText    | No       | <code>let</code> | No       | <code>string</code>                                                                              | <code>"Previous page"</code> | Specify the backward button text                                    |
+| tooltipPosition | No       | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left" &#124; "outside" &#124; "inside"</code> | <code>"bottom"</code>        | Set the position of the tooltip relative to the pagination buttons. |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 907b19bd..40c92155 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -8520,6 +8520,18 @@
           "isRequired": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "tooltipPosition",
+          "kind": "let",
+          "description": "Set the position of the tooltip relative to the pagination buttons.",
+          "type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"outside\" | \"inside\"",
+          "value": "\"bottom\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "moduleExports": [],
diff --git a/docs/src/pages/components/PaginationNav.svx b/docs/src/pages/components/PaginationNav.svx
index 690921fc..e279d4d1 100644
--- a/docs/src/pages/components/PaginationNav.svx
+++ b/docs/src/pages/components/PaginationNav.svx
@@ -42,4 +42,10 @@ Use the `forwardText` and `backwardText` props to customize the button text.
 <PaginationNav
   forwardText="Next"
   backwardText="Previous"
-/>
\ No newline at end of file
+/>
+
+## Tooltip Position
+
+Use the `tooltipPosition` prop to change the alignment of the tooltip.
+
+<PaginationNav tooltipPosition="outside" total={3} loop />
\ No newline at end of file
diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte
index 4e31aa10..adf06929 100644
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@@ -23,6 +23,12 @@
   /** Specify the backward button text */
   export let backwardText = "Previous page";
 
+  /**
+   * Set the position of the tooltip relative to the pagination buttons.
+   * @type {"top" | "right" | "bottom" | "left" | "outside" | "inside"}
+   */
+  export let tooltipPosition = "bottom";
+
   import { createEventDispatcher } from "svelte";
   import CaretLeft from "../icons/CaretLeft.svelte";
   import CaretRight from "../icons/CaretRight.svelte";
@@ -76,7 +82,11 @@
       <Button
         kind="ghost"
         tooltipAlignment="center"
-        tooltipPosition="bottom"
+        tooltipPosition="{tooltipPosition === 'inside'
+          ? 'right'
+          : tooltipPosition === 'outside'
+          ? 'left'
+          : tooltipPosition}"
         iconDescription="{backwardText}"
         disabled="{!loop && page === 1}"
         icon="{CaretLeft}"
@@ -147,7 +157,11 @@
       <Button
         kind="ghost"
         tooltipAlignment="center"
-        tooltipPosition="bottom"
+        tooltipPosition="{tooltipPosition === 'inside'
+          ? 'left'
+          : tooltipPosition === 'outside'
+          ? 'right'
+          : tooltipPosition}"
         iconDescription="{forwardText}"
         disabled="{!loop && page === total}"
         icon="{CaretRight}"
diff --git a/types/PaginationNav/PaginationNav.svelte.d.ts b/types/PaginationNav/PaginationNav.svelte.d.ts
index adb27598..11b0ac1d 100644
--- a/types/PaginationNav/PaginationNav.svelte.d.ts
+++ b/types/PaginationNav/PaginationNav.svelte.d.ts
@@ -38,6 +38,12 @@ export interface PaginationNavProps
    * @default "Previous page"
    */
   backwardText?: string;
+
+  /**
+   * Set the position of the tooltip relative to the pagination buttons.
+   * @default "bottom"
+   */
+  tooltipPosition?: "top" | "right" | "bottom" | "left" | "outside" | "inside";
 }
 
 export default class PaginationNav extends SvelteComponentTyped<