New Ionic "trapFocus" config.

README.md

@@ -63,6 +63,7 @@ Demo and documentation can be found at [hakimio.github.io/ngx-ui-tour](https://h
 
 | Angular | RxJS | Ionic | ngx-ui-tour |
 |---------|------|-------|-------------|
+| 18      | 7    | 8     | 5           |
 | 18      | 7    | 7, 8  | 4           |
 | 17      | 7    | 7, 8  | 3           |
 | 16      | 7    | 6, 7  | 2           |

projects/ngx-ui-tour-ionic/src/lib/ion-tour.service.ts

@@ -20,6 +20,7 @@ export class IonTourService<T extends IonStepOption = IonStepOption> extends Tou
         stepDefaults.backdropConfig ??= userDefaults?.backdropConfig ?? {};
         stepDefaults.backdropConfig.parentContainer ??= userDefaults?.backdropConfig?.parentContainer ?? 'ion-app';
         stepDefaults.delayAfterNavigation ??= userDefaults?.delayAfterNavigation ?? (isIOS ? 700: 500);
+        stepDefaults.trapFocus ??= userDefaults?.trapFocus ?? false;
 
         super.initialize(steps, stepDefaults);
     }

projects/ngx-ui-tour-ionic/src/lib/step-option.interface.ts

@@ -3,6 +3,7 @@ import {IStepOption} from 'ngx-ui-tour-core';
 export interface IonStepOption extends IStepOption {
     placement?: IonPopoverPlacement;
     showArrow?: boolean;
+    trapFocus?: boolean;
 }
 
 export interface IonPopoverPlacement {

projects/ngx-ui-tour-ionic/src/lib/tour-step-template/tour-step-template.component.html

@@ -8,6 +8,7 @@
     [style.--max-width]="step?.stepDimensions?.maxWidth"
     [style.--width]="step?.stepDimensions?.width"
     [arrow]="step?.showArrow ?? true"
+    [focusTrap]="step?.trapFocus ?? false"
 >
     <ng-template>
         <ng-container

src/app/ion-popover/ion-popover.component.html

@@ -47,6 +47,7 @@
     <ng-template pageTab>
         <app-step-config
             [isIonicShowArrowVisible]="true"
+            [isIonicTrapFocusVisible]="true"
         >
             <app-placement-config
                 type="IonPopoverPlacement"

src/app/shared/step-config/step-config.component.html

@@ -114,6 +114,16 @@
             apply in <code>md</code> mode.
         </ng-template>
     }
+    @if (isIonicTrapFocusVisible) {
+        <ng-template
+                documentationPropertyName="trapFocus"
+                documentationPropertyType="boolean"
+                [documentationPropertyValue]="false"
+        >
+            If enabled, focus will not be allowed to move outside of the tour step popover. Disabled by default to
+            allow focus to move outside of the popover overlay.
+        </ng-template>
+    }
     @if (isMdMenuShowArrowVisible) {
         <ng-template
             documentationPropertyName="showArrow"

src/app/shared/step-config/step-config.component.ts

@@ -24,6 +24,9 @@ export class StepConfigComponent {
     @Input()
     isIonicShowArrowVisible = false;
 
+    @Input()
+    isIonicTrapFocusVisible = false;
+
     @Input()
     isMdMenuShowArrowVisible = false;