@decaf-ts/for-angular 0.1.20 → 0.1.21

package/fesm2022/decaf-ts-for-angular.mjs

@@ -1,6 +1,6 @@
 import { parseValueByType, HTML5InputTypes, UIKeys, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafTranslateService, DecafComponent, ComponentEventNames, UIValidator, RenderingError, UIMediaBreakPoints, LayoutGridGaps, ElementSizes, DecafEventHandler } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
-import { InjectionToken, isDevMode, provideEnvironmentInitializer, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, Input, Directive, signal, ChangeDetectorRef, EnvironmentInjector, Renderer2, EventEmitter, ElementRef, Output, ViewChild, Inject, ViewContainerRef, TemplateRef, Component, ViewEncapsulation, HostListener, Pipe, NgModule } from '@angular/core';
+import { InjectionToken, isDevMode, provideEnvironmentInitializer, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, Input, Directive, signal, ChangeDetectorRef, EnvironmentInjector, Renderer2, EventEmitter, effect, ElementRef, Output, ViewChild, Inject, ViewContainerRef, TemplateRef, Component, ViewEncapsulation, HostListener, Pipe, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { Location, NgComponentOutlet, CommonModule } from '@angular/common';
 import { ValidationKeys, DEFAULT_PATTERNS, VALIDATION_PARENT_KEY, Primitives, Model, Validation, ComparisonValidationKeys, PathProxyEngine, ModelKeys, isValidDate as isValidDate$1, parseDate, sf as sf$1, ReservedModels } from '@decaf-ts/decorator-validation';
@@ -17,6 +17,7 @@ import { forkJoin, Subject, BehaviorSubject, fromEvent, of, merge, Observable, t
 import { Title, DomSanitizer } from '@angular/platform-browser';
 import { Router, NavigationStart, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { MenuController } from '@ionic/angular';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { provideHttpClient, HttpClient } from '@angular/common/http';
 import { TranslateParser, provideTranslateService, TranslateLoader, provideTranslateParser, TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import { map, distinctUntilChanged, takeUntil, shareReplay, tap, switchMap } from 'rxjs/operators';
@@ -3233,18 +3234,6 @@ function provideDecafI18nConfig(config = { fallbackLang: 'en', lang: 'en' }, res
     ];
 }
 
-/**
- * @module NgxMediaService
- * @description Provides utilities for managing media-related features such as color scheme detection,
- * window resize observation, and SVG injection.
- * @summary
- * This module exposes the `NgxMediaService` class, which includes methods for observing the
- * application's color scheme, handling window resize events, and dynamically injecting SVG content
- * into the DOM. It leverages Angular's dependency injection system and RxJS for reactive programming.
- *
- * Key exports:
- * - {@link NgxMediaService}: The main service class providing media-related utilities.
- */
 /**
  * @description Service for managing media-related features in an Angular application.
  * @summary
@@ -3363,7 +3352,7 @@ class NgxMediaService {
         const win = this._window;
         this.angularZone.runOutsideAngular(() => {
             fromEvent(win, 'resize')
-                .pipe(distinctUntilChanged(), takeUntil(this.destroy$), shareReplay(1))
+                .pipe(distinctUntilChanged(), takeUntil(this.destroy$), shareReplay({ bufferSize: 1, refCount: true }))
                 .subscribe(() => {
                 const dimensions = {
                     width: win.innerWidth,
@@ -3449,7 +3438,7 @@ class NgxMediaService {
             }
             // store the latest schema value
             this.currentSchema = scheme;
-        }), takeUntil(this.destroy$), shareReplay(1));
+        }), takeUntil(this.destroy$), shareReplay({ bufferSize: 1, refCount: true }));
     }
     /**
      * @description Observes the scroll state of the active page.
@@ -3471,12 +3460,9 @@ class NgxMediaService {
         // await delay for page change to complete
         return timer(awaitDelay).pipe(switchMap(() => new Observable((observer) => {
             const activeContent = this._document.querySelector('ion-router-outlet .ion-page:not(.ion-page-hidden) ion-content');
-            if (!(activeContent &&
-                typeof activeContent.getScrollElement === 'function'))
+            if (!(activeContent && typeof activeContent.getScrollElement === 'function'))
                 return this.angularZone.run(() => observer.next(false));
-            activeContent
-                .getScrollElement()
-                .then((element) => {
+            activeContent.getScrollElement().then((element) => {
                 const emitScrollState = () => {
                     const scrollTop = element.scrollTop || 0;
                     this.angularZone.run(() => observer.next(scrollTop > offset));
@@ -3485,7 +3471,7 @@ class NgxMediaService {
                 emitScrollState();
                 return () => element.removeEventListener('scroll', emitScrollState);
             });
-        })), distinctUntilChanged(), takeUntil(this.destroy$), shareReplay(1));
+        })), distinctUntilChanged(), takeUntil(this.destroy$), shareReplay({ bufferSize: 1, refCount: true }));
     }
     /**
      * @description Loads an SVG file and injects it into a target element.
@@ -3507,7 +3493,7 @@ class NgxMediaService {
         this.angularZone.runOutsideAngular(() => {
             const svg$ = http
                 .get(path, { responseType: 'text' })
-                .pipe(takeUntil(this.destroy$), shareReplay(1));
+                .pipe(takeUntil(this.destroy$), shareReplay({ bufferSize: 1, refCount: true }));
             svg$.subscribe((svg) => {
                 this.angularZone.run(() => {
                     target.innerHTML = svg;
@@ -3532,8 +3518,7 @@ class NgxMediaService {
         if (!this.darkModeEnabled())
             return of(false);
         const documentElement = this._document.documentElement;
-        return this.colorScheme$.pipe(map((scheme) => documentElement.classList.contains(AngularEngineKeys.DARK_PALETTE_CLASS) ||
-            scheme === WindowColorSchemes.dark), distinctUntilChanged(), shareReplay(1), takeUntil(this.destroy$));
+        return this.colorScheme$.pipe(map((scheme) => documentElement.classList.contains(AngularEngineKeys.DARK_PALETTE_CLASS) || scheme === WindowColorSchemes.dark), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }), takeUntil(this.destroy$));
     }
     /**
      * @description Toggles dark mode for a specific component.
@@ -3813,7 +3798,7 @@ class NgxRepositoryDirective extends DecafComponent {
                     this.repository?.observe(this.repositoryObserver);
                     this.log.for(this.observe).info(`Registered repository observer for model ${this.modelName}`);
                     this.repositoryObserverSubject
-                        .pipe(debounceTime(100), shareReplay$1(1), takeUntil$1(this.destroySubscriptions$))
+                        .pipe(debounceTime(100), shareReplay$1({ bufferSize: 1, refCount: true }), takeUntil$1(this.destroySubscriptions$))
                         .subscribe(([model, action, uid, data]) => this.handleObserveEvent(data, model, action, uid));
                 }
             }
@@ -4405,6 +4390,11 @@ class NgxComponentDirective extends NgxRepositoryDirective {
          * @default WindowColorSchemes.light
          */
         this.colorSchema = WindowColorSchemes.light;
+        this.popState$ = fromEvent(window, 'popstate').pipe(shareReplay$1({ bufferSize: 1, refCount: true }));
+        // Convertendo o Observable em Signal
+        this.popStateSignal = toSignal(this.popState$, {
+            initialValue: null,
+        });
         this.value = undefined;
         this.componentName = componentName || this.constructor.name || 'NgxComponentDirective';
         this.localeRoot = localeRoot;
@@ -4419,6 +4409,36 @@ class NgxComponentDirective extends NgxRepositoryDirective {
                 this.colorSchema = WindowColorSchemes.dark;
             }
         });
+        effect(async () => {
+            const event = this.popStateSignal();
+            if (event) {
+                console.log(`Back detectado!' no component ${this.componentName}`);
+                await this.beforeInitialize(this);
+            }
+        });
+    }
+    async beforeInitialize(component) {
+        console.log(`calling render for component ${this.componentName}`);
+        if (!component) {
+            component = this;
+        }
+        const instance = component;
+        if (this.propsMapperFn) {
+            for (const [key, fn] of Object.entries(this.propsMapperFn)) {
+                if (key in instance)
+                    instance[key] = await fn(instance);
+            }
+        }
+        // search for handler render
+        const handler = this.handlers?.[ComponentEventNames.Render] || undefined;
+        if (handler && typeof handler === 'function') {
+            await handler.bind(instance)(instance, this.name, this.value);
+        }
+        // search for event render
+        const event = this.events?.[ComponentEventNames.Render] || undefined;
+        if (event && typeof event === 'function') {
+            await event.bind(instance)(instance, this.name, this.value);
+        }
     }
     async initialize() {
         this.mediaService.darkModeEnabled();
@@ -4430,7 +4450,9 @@ class NgxComponentDirective extends NgxRepositoryDirective {
         if (this.operation === OperationKeys.CREATE) {
             this.refreshing = false;
         }
-        this.router.events.pipe(shareReplay$1(1), takeUntil$1(this.destroySubscriptions$)).subscribe(async (event) => {
+        this.router.events
+            .pipe(shareReplay$1({ bufferSize: 1, refCount: true }), takeUntil$1(this.destroySubscriptions$))
+            .subscribe(async (event) => {
             if (event instanceof NavigationStart) {
                 if (this.value) {
                     await this.ngOnDestroy();
@@ -4438,24 +4460,9 @@ class NgxComponentDirective extends NgxRepositoryDirective {
             }
         });
         this.route = this.router.url.replace('/', '');
-        const instance = this;
-        if (this.propsMapperFn) {
-            for (const [key, fn] of Object.entries(this.propsMapperFn)) {
-                if (key in instance)
-                    instance[key] = await fn(instance);
-            }
-        }
         // search for handler to render event
         if (!this.initialized) {
-            const handler = this.handlers?.[ComponentEventNames.Render] || undefined;
-            if (handler && typeof handler === 'function') {
-                await handler.bind(instance)(instance, this.name, this.value);
-            }
-            // search for event to render event
-            const event = this.events?.[ComponentEventNames.Render] || undefined;
-            if (event && typeof event === 'function') {
-                await event.bind(instance)(instance, this.name, this.value);
-            }
+            await this.beforeInitialize(this);
         }
         await super.initialize();
         this.initialized = true;
@@ -5155,7 +5162,9 @@ class NgxPageDirective extends NgxComponentDirective {
      * @memberOf module:lib/engine/NgxPageDirective
      */
     async ngAfterViewInit() {
-        this.router.events.pipe(takeUntil$1(this.destroySubscriptions$), shareReplay$1(1)).subscribe(async (event) => {
+        this.router.events
+            .pipe(takeUntil$1(this.destroySubscriptions$), shareReplay$1({ bufferSize: 1, refCount: true }))
+            .subscribe(async (event) => {
             if (event instanceof NavigationEnd) {
                 const url = (event?.url || '').replace('/', '');
                 this.currentRoute = url;
@@ -5799,7 +5808,7 @@ class NgxRenderableComponentDirective extends NgxModelPageDirective {
                 const value = this.instance[key];
                 if (value instanceof EventEmitter)
                     this.instance[key]
-                        .pipe(shareReplay$1(1), takeUntil$1(this.destroySubscriptions$))
+                        .pipe(shareReplay$1({ bufferSize: 1, refCount: true }), takeUntil$1(this.destroySubscriptions$))
                         .subscribe(async (event) => {
                         await this.handleEvent({
                             component: component.name || '',
@@ -10530,7 +10539,7 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
     async ngOnInit() {
         this.windowWidth = getWindowWidth();
         this.windowResizeSubscription = fromEvent(window, 'resize')
-            .pipe(debounceTime(300), takeUntil$1(this.destroySubscriptions$), shareReplay$1(1))
+            .pipe(debounceTime(300), takeUntil$1(this.destroySubscriptions$), shareReplay$1({ bufferSize: 1, refCount: true }))
             .subscribe(() => {
             this.windowWidth = getWindowWidth();
         });
@@ -11726,7 +11735,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         if (!this.searchbarPlaceholder)
             this.searchbarPlaceholder = `${this.locale}.search.placeholder`;
         this.clickItemSubject
-            .pipe(debounceTime(100), shareReplay$1(1), takeUntil$1(this.destroySubscriptions$))
+            .pipe(debounceTime(100), shareReplay$1({ bufferSize: 1, refCount: true }), takeUntil$1(this.destroySubscriptions$))
             .subscribe((event) => this.clickEventEmit(event));
         this.limit = Number(this.limit);
         this.start = Number(this.start);
@@ -14666,7 +14675,7 @@ let TableComponent = class TableComponent extends ListComponent {
         this.type = ListComponentsTypes.PAGINATED;
         this.empty = Object.assign({}, DefaultListEmptyOptions, this.empty);
         this.repositoryObserverSubject
-            .pipe(debounceTime(100), shareReplay$1(1), takeUntil$1(this.destroySubscriptions$))
+            .pipe(debounceTime(100), shareReplay$1({ bufferSize: 1, refCount: true }), takeUntil$1(this.destroySubscriptions$))
             .subscribe(([model, action, uid, data]) => this.handleObserveEvent(model, action, uid, data));
         this.cols = this._cols;
         this.getOperations();