@sapphire-ion/framework 1.0.35 → 1.0.36

package/fesm2022/sapphire-ion-framework.mjs

@@ -3,7 +3,7 @@ import { NavController, IonicModule, IonDatetime, IonModal, IonBackButton, IonCh
 import { FilePicker } from '@capawesome/capacitor-file-picker';
 import { CameraSource } from '@capacitor/camera';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, NgModule, Inject, inject, signal, model, Component, Input, Pipe, input, computed, effect, contentChildren, output, forwardRef, ContentChildren, EventEmitter, Output, HostListener, ViewChild, Directive, TemplateRef, ContentChild, ElementRef, ViewChildren, HostBinding, ViewContainerRef } from '@angular/core';
+import { Injectable, InjectionToken, NgModule, Inject, inject, signal, model, Component, Input, Pipe, input, computed, effect, contentChildren, output, forwardRef, ContentChildren, EventEmitter, Output, HostListener, ViewChild, Directive, ElementRef, TemplateRef, ContentChild, ViewChildren, HostBinding, ViewContainerRef } from '@angular/core';
 import moment from 'moment';
 import { BehaviorSubject, firstValueFrom, from, switchMap, Subject, takeUntil, distinctUntilChanged, debounceTime, lastValueFrom, Observable, tap, finalize, share, catchError } from 'rxjs';
 import * as i1 from '@angular/common/http';
@@ -25,6 +25,7 @@ import { MaskitoDirective } from '@maskito/angular';
 import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoTimeOptionsGenerator } from '@maskito/kit';
 import { autoUpdate, computePosition, offset, flip, shift, limitShift, arrow } from '@floating-ui/dom';
 import { Clipboard } from '@capacitor/clipboard';
+import { OverlayModule } from '@angular/cdk/overlay';
 import * as i7 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { isPossiblePhoneNumber } from 'libphonenumber-js';
@@ -580,30 +581,89 @@ class InputCpfCnpjConfiguration {
     }
 }
 
+class ModalFocusTrapService {
+    constructor() {
+        this.initGlobalFocusTrapDisable();
+    }
+    initGlobalFocusTrapDisable() {
+        // Wait for the platform to be ready
+        document.addEventListener('DOMContentLoaded', () => {
+            this.setupModalObserver();
+        });
+    }
+    setupModalObserver() {
+        // Create a mutation observer to watch for new modals
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        const element = node;
+                        // Check if the added node is an ion-modal
+                        if (element.tagName?.toLowerCase() === 'ion-modal') {
+                            this.disableFocusTrap(element);
+                        }
+                        // Check for ion-modal children
+                        const modals = element.querySelectorAll?.('ion-modal');
+                        modals?.forEach(modal => this.disableFocusTrap(modal));
+                    }
+                });
+            });
+        });
+        // Start observing
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+        // Also handle existing modals
+        const existingModals = document.querySelectorAll('ion-modal');
+        existingModals.forEach(modal => this.disableFocusTrap(modal));
+    }
+    disableFocusTrap(modal) {
+        // Add the CSS class
+        modal.classList.add('ion-disable-focus-trap');
+        // Set the property if it exists
+        const modalElement = modal;
+        if (modalElement.disableFocusTrap !== undefined) {
+            modalElement.disableFocusTrap = true;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalFocusTrapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalFocusTrapService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalFocusTrapService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 const EnvironmentInjectionToken = new InjectionToken('Environment');
 class SapphireIonFrameworkModule {
+    constructor(mis) {
+        this.mis = mis;
+    }
     static forRoot(config) {
         return {
             ngModule: SapphireIonFrameworkModule,
             providers: [
+                ModalFocusTrapService,
                 EnvironmentService, { provide: EnvironmentInjectionToken, useValue: config },
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SapphireIonFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SapphireIonFrameworkModule, deps: [{ token: ModalFocusTrapService }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SapphireIonFrameworkModule, imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SapphireIonFrameworkModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SapphireIonFrameworkModule, providers: [ModalFocusTrapService], imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SapphireIonFrameworkModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
                     exports: [],
-                    imports: [
-                        CommonModule
-                    ],
+                    imports: [CommonModule,],
+                    providers: [ModalFocusTrapService],
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: ModalFocusTrapService }] });
 
 class Environment {
     get defaultPageLimit() {
@@ -2708,8 +2768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class SIonPopoverComponent {
-    constructor(viewContainerRef, ngZone) {
-        this.viewContainerRef = viewContainerRef;
+    constructor(ngZone) {
         this.ngZone = ngZone;
         this.fill = 'blur';
         this.arrow = true;
@@ -2724,9 +2783,9 @@ class SIonPopoverComponent {
         this.anchor = undefined;
         this.state = POPOVER_STATE.IDLE;
     }
-    ngOnInit() {
-        this.CreateEmbeddedView();
-        this.CreateInstance();
+    ngAfterViewInit() {
+        this._instance = this.contentContainer.nativeElement;
+        document.body.appendChild(this._instance);
         //TODO: Use Renderer2 to add event listeners for better Angular compatibility when updating to Angular 19
         this.ngZone.runOutsideAngular(() => {
             this.documentClickListener = (event) => {
@@ -2745,27 +2804,6 @@ class SIonPopoverComponent {
             document.addEventListener('click', this.documentClickListener, true);
         });
     }
-    CreateEmbeddedView() {
-        if (this._embeddedView) {
-            return;
-        }
-        this._embeddedView = this.popoverTemplate.createEmbeddedView({});
-        this.viewRef = this.viewContainerRef.insert(this._embeddedView);
-    }
-    CreateInstance() {
-        this._instance = this._embeddedView.rootNodes[0];
-        document.body.appendChild(this._instance);
-        // const style = {
-        //   "solid"  : ['bg-light'],
-        //   "outline": ['bg-transparent'],
-        //   "blur"   : ['backdrop-blur-md', 'bg-light/80'],
-        //   "clear"  : ['!border-0 bg-transparent'],
-        // }[this.fill];
-        // style.forEach(s => {
-        //   this._instance.classList.add(s);
-        //   this.arrowEl?.classList.add(s);
-        // });
-    }
     get arrowEl() {
         return this._instance.querySelector('.popover-arrow');
     }
@@ -2826,7 +2864,6 @@ class SIonPopoverComponent {
     }
     ngOnDestroy() {
         if (this._instance) {
-            document.body.removeChild(this._instance);
             this._instance.remove();
             this._instance = undefined;
         }
@@ -2853,13 +2890,13 @@ class SIonPopoverComponent {
             ].filter(p => p),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIonPopoverComponent, selector: "sion-popover", inputs: { fill: "fill", arrow: "arrow", flip: "flip", placement: "placement", height: "height", width: "width", anchor: "anchor" }, outputs: { onWillPresent: "onWillPresent", onDidPresent: "onDidPresent", onWillDismiss: "onWillDismiss", onDidDismiss: "onDidDismiss" }, viewQueries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true, static: true }, { propertyName: "contentContainer", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "arrowElement", first: true, predicate: ["popoverArrow"], descendants: true }], ngImport: i0, template: "<ng-template #popoverTemplate>\r\n  <div #popoverWrapper \r\n    class=\"popover-wrapper translucid-border\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n    [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n      }\"\r\n  > \r\n    <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n      }\"\r\n    ></div>\r\n\r\n    <ng-content #content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,auto,opacity,filter;opacity:0;transition:opacity .15s ease-in-out,transform .15s ease-in-out,filter .15s ease-in-out;min-width:2rem;min-height:2rem;filter:grayscale(.9);transform:scale(.95)}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.show{filter:grayscale(0);transform:scale(1);opacity:1}.popover-wrapper:not(.show){pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIonPopoverComponent, selector: "sion-popover", inputs: { fill: "fill", arrow: "arrow", flip: "flip", placement: "placement", height: "height", width: "width", anchor: "anchor" }, outputs: { onWillPresent: "onWillPresent", onDidPresent: "onDidPresent", onWillDismiss: "onWillDismiss", onDidDismiss: "onDidDismiss" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["popoverWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div #popoverWrapper \r\n  class=\"popover-wrapper translucid-border\"\r\n  [style.height]=\"height\"\r\n  [style.width]=\"width\"\r\n  [ngClass]=\"{\r\n      'bg-light'        : fill == 'solid',\r\n      'bg-transparent'  : fill == 'outline',\r\n      'backdrop-blur-md bg-light/80': fill == 'blur',\r\n      '!border-0'       : fill == 'clear',\r\n    }\"\r\n> \r\n  <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n    [ngClass]=\"{\r\n      'bg-light'        : fill == 'solid',\r\n      'bg-transparent'  : fill == 'outline',\r\n      'backdrop-blur-md bg-light/80': fill == 'blur',\r\n      '!border-0'       : fill == 'clear',\r\n    }\"\r\n  ></div>\r\n  <ng-content #content></ng-content>\r\n</div>", styles: [".popover-wrapper{border-radius:.75rem;width:max-content;position:fixed;will-change:left,top,bottom,right,auto,opacity,filter;opacity:0;transition:opacity .15s ease-in-out,transform .15s ease-in-out,filter .15s ease-in-out;min-width:2rem;min-height:2rem;filter:grayscale(.9);transform:scale(.95);pointer-events:auto!important;z-index:10001!important}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.show{filter:grayscale(0);transform:scale(1);opacity:1}.popover-wrapper:not(.show){pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sion-popover', template: "<ng-template #popoverTemplate>\r\n  <div #popoverWrapper \r\n    class=\"popover-wrapper translucid-border\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n    [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n      }\"\r\n  > \r\n    <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n      }\"\r\n    ></div>\r\n\r\n    <ng-content #content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,auto,opacity,filter;opacity:0;transition:opacity .15s ease-in-out,transform .15s ease-in-out,filter .15s ease-in-out;min-width:2rem;min-height:2rem;filter:grayscale(.9);transform:scale(.95)}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.show{filter:grayscale(0);transform:scale(1);opacity:1}.popover-wrapper:not(.show){pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.NgZone }], propDecorators: { fill: [{
+            args: [{ selector: 'sion-popover', template: "<div #popoverWrapper \r\n  class=\"popover-wrapper translucid-border\"\r\n  [style.height]=\"height\"\r\n  [style.width]=\"width\"\r\n  [ngClass]=\"{\r\n      'bg-light'        : fill == 'solid',\r\n      'bg-transparent'  : fill == 'outline',\r\n      'backdrop-blur-md bg-light/80': fill == 'blur',\r\n      '!border-0'       : fill == 'clear',\r\n    }\"\r\n> \r\n  <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n    [ngClass]=\"{\r\n      'bg-light'        : fill == 'solid',\r\n      'bg-transparent'  : fill == 'outline',\r\n      'backdrop-blur-md bg-light/80': fill == 'blur',\r\n      '!border-0'       : fill == 'clear',\r\n    }\"\r\n  ></div>\r\n  <ng-content #content></ng-content>\r\n</div>", styles: [".popover-wrapper{border-radius:.75rem;width:max-content;position:fixed;will-change:left,top,bottom,right,auto,opacity,filter;opacity:0;transition:opacity .15s ease-in-out,transform .15s ease-in-out,filter .15s ease-in-out;min-width:2rem;min-height:2rem;filter:grayscale(.9);transform:scale(.95);pointer-events:auto!important;z-index:10001!important}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.show{filter:grayscale(0);transform:scale(1);opacity:1}.popover-wrapper:not(.show){pointer-events:none!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { fill: [{
                 type: Input
             }], arrow: [{
                 type: Input
@@ -2881,15 +2918,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }], anchor: [{
                 type: Input
-            }], popoverTemplate: [{
-                type: ViewChild,
-                args: ['popoverTemplate', { static: true }]
             }], contentContainer: [{
                 type: ViewChild,
-                args: ['popoverWrapper']
-            }], arrowElement: [{
-                type: ViewChild,
-                args: ['popoverArrow']
+                args: ['popoverWrapper', { read: ElementRef }]
             }] } });
 var POPOVER_STATE;
 (function (POPOVER_STATE) {
@@ -10188,8 +10219,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class SIonPopoverModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverModule, declarations: [SIonPopoverComponent], imports: [CommonModule], exports: [SIonPopoverComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverModule, imports: [CommonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverModule, declarations: [SIonPopoverComponent], imports: [CommonModule, OverlayModule], exports: [SIonPopoverComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverModule, imports: [CommonModule, OverlayModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverModule, decorators: [{
             type: NgModule,
@@ -10197,7 +10228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     declarations: [SIonPopoverComponent],
                     exports: [SIonPopoverComponent],
                     imports: [
-                        CommonModule
+                        CommonModule, OverlayModule
                     ]
                 }]
         }] });
@@ -10245,7 +10276,8 @@ class InputsModule {
             MaskitoDirective,
             SIonPopoverModule,
             LoadingComponent,
-            NgVarDirective], exports: [InputBoolComponent,
+            NgVarDirective,
+            OverlayModule], exports: [InputBoolComponent,
             InputCepComponent,
             InputColorComponent,
             InputCpfCnpjComponent,
@@ -10267,7 +10299,8 @@ class InputsModule {
             FormsModule,
             ImageComponent,
             SIonPopoverModule,
-            LoadingComponent] }); }
+            LoadingComponent,
+            OverlayModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputsModule, decorators: [{
             type: NgModule,
@@ -10283,7 +10316,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MaskitoDirective,
                         SIonPopoverModule,
                         LoadingComponent,
-                        NgVarDirective
+                        NgVarDirective,
+                        OverlayModule
                     ]
                 }]
         }] });