@decaf-ts/for-angular 0.1.20 → 0.1.22

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 { parseValueByType, HTML5InputTypes, UIKeys, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafTranslateService, DecafComponent, ComponentEventNames, UIValidator, RenderingError, UIMediaBreakPoints, uihandlers, 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,34 @@ class NgxComponentDirective extends NgxRepositoryDirective {
                 this.colorSchema = WindowColorSchemes.dark;
             }
         });
+        effect(async () => {
+            const event = this.popStateSignal();
+            if (event) {
+                await this.beforeInitialize(this);
+            }
+        });
+    }
+    async beforeInitialize(component) {
+        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 +4448,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 +4458,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 +5160,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;
@@ -5683,7 +5690,7 @@ class NgxModelPageDirective extends NgxPageDirective {
         if (this.isModalChild) {
             this.listenEvent.emit({
                 ...event,
-                data: result,
+                data: result || event.data,
             });
         }
         return { ...event, success, message, model: result, aborted: false };
@@ -5799,7 +5806,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 || '',
@@ -7034,6 +7041,7 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
          * @type {Color}
          */
         this.iconColor = 'dark';
+        this.handlers = {};
     }
     /**
      * @description Lifecycle hook that initializes the modal component.
@@ -7055,6 +7063,12 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
     async prepare(options = {}) {
         this.options = Object.assign({}, DefaultModalOptions, this.options, options);
         this.globals = Object.assign({}, this.globals || {}, { isModalChild: true });
+        let handlers = this.globals?.['handlers'] || this.handlers;
+        // binding custom handlers to the model
+        if (Object.keys(handlers).length) {
+            handlers = typeof this.handlers === 'function' ? { confirm: handlers } : handlers;
+            uihandlers(handlers)(this.model.constructor);
+        }
         if (this.globals?.['props']) {
             this.globals['props'] = Object.assign({}, this.globals['props'], { isModalChild: true });
         }
@@ -7159,7 +7173,7 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
         await modal.dismiss(event?.data || undefined, ActionRoles.confirm);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ModalComponent, isStandalone: true, selector: "ngx-decaf-modal", inputs: { title: "title", isOpen: "isOpen", tag: "tag", options: "options", globals: "globals", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition", fullscreen: "fullscreen", expandable: "expandable", lightBox: "lightBox", headerTransparent: "headerTransparent", headerBackground: "headerBackground", showHeader: "showHeader", showCloseButton: "showCloseButton" }, outputs: { willDismissEvent: "willDismissEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["component"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-modal\n  [id]=\"uid\"\n  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-fullscreen-expanded]=\"expanded\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar [color]=\"headerBackground\">\n        @if (title?.length) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          @if (expandable && !fullscreen) {\n            <ion-button\n              fill=\"clear\"\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-expand\"\n              (click)=\"handleExpandToggle()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n              />\n            </ion-button>\n          }\n          @if (showCloseButton) {\n            <ion-button\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-close\"\n              (click)=\"cancel()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                name=\"ti-x\"\n              />\n            </ion-button>\n          }\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section\n        class=\"dcf-modal-body\"\n        [class.dcf-has-title]=\"title?.length\"\n      >\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner\n              name=\"crescent\"\n              color=\"primary\"\n            ></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === 'top') {\n            <div\n              class=\"dcf-modal-content\"\n              id=\"dcf-modal-content\"\n              [innerHTML]=\"inlineContent\"\n            ></div>\n          }\n          @if (!tag && model) {\n            <ngx-decaf-model-renderer\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          } @else if (tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{ props: globals }\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === 'bottom') {\n            <div\n              class=\"dcf-modal-content\"\n              id=\"dcf-modal-content\"\n              [innerHTML]=\"inlineContent\"\n            ></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important;border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ModalComponent, isStandalone: true, selector: "ngx-decaf-modal", inputs: { title: "title", isOpen: "isOpen", tag: "tag", options: "options", globals: "globals", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition", fullscreen: "fullscreen", expandable: "expandable", lightBox: "lightBox", headerTransparent: "headerTransparent", headerBackground: "headerBackground", showHeader: "showHeader", showCloseButton: "showCloseButton", handlers: "handlers" }, outputs: { willDismissEvent: "willDismissEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["component"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-modal\n  [id]=\"uid\"\n  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-fullscreen-expanded]=\"expanded\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar [color]=\"headerBackground\">\n        @if (title?.length) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          @if (expandable && !fullscreen) {\n            <ion-button\n              fill=\"clear\"\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-expand\"\n              (click)=\"handleExpandToggle()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n              />\n            </ion-button>\n          }\n          @if (showCloseButton) {\n            <ion-button\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-close\"\n              (click)=\"cancel()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                name=\"ti-x\"\n              />\n            </ion-button>\n          }\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section\n        class=\"dcf-modal-body\"\n        [class.dcf-has-title]=\"title?.length\"\n      >\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner\n              name=\"crescent\"\n              color=\"primary\"\n            ></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === 'top') {\n            <div\n              class=\"dcf-modal-content\"\n              id=\"dcf-modal-content\"\n              [innerHTML]=\"inlineContent\"\n            ></div>\n          }\n          @if (!tag && model) {\n            <ngx-decaf-model-renderer\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          } @else if (tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{ props: globals }\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === 'bottom') {\n            <div\n              class=\"dcf-modal-content\"\n              id=\"dcf-modal-content\"\n              [innerHTML]=\"inlineContent\"\n            ></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important;border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ModalComponent = __decorate([
     Dynamic(),
@@ -7214,6 +7228,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], willDismissEvent: [{
                 type: Output
+            }], handlers: [{
+                type: Input
             }] } });
 let ModalConfirmComponent = class ModalConfirmComponent extends ModalComponent {
     async ngOnInit() {
@@ -7291,8 +7307,18 @@ async function getNgxModalComponent(props = {}, modalProps = {}, injector) {
  * @returns {Promise<IonModal>} - A promise that resolves with the modal instance.
  */
 async function getNgxModalCrudComponent(model, props = {}, modalProps = {}, injector) {
-    if (!props || !props?.['operation'])
+    if (!props || !props?.['operation']) {
         props.operation = OperationKeys.CREATE;
+    }
+    const { handlers } = props;
+    // if has not custom handlers passed, create a generic confirm handler for crud operations and bind it to the model using uihandlers decorator
+    if (Model.isModel(model) && !handlers) {
+        uihandlers({
+            [ComponentEventNames.Submit]: (event, data, instance) => {
+                instance.listenEvent.emit(event);
+            },
+        })(model.constructor);
+    }
     const component = await NgxRenderingEngine.createComponent(ModalComponent, {
         model,
         globals: props,
@@ -7606,11 +7632,16 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
                     this.parentForm = this.formGroup.parent;
                 this.formControl = this.formGroup.get(this.name);
             }
-            if (!this.value && this.options.length)
-                this.setValue(this.options[0].value);
+            if (HTML5InputTypes.SELECT === this.type && !this.value) {
+                if (this.options?.length) {
+                    this.setValue(this.options[0].value);
+                    this.changeDetectorRef.detectChanges();
+                }
+            }
             if (this.type === HTML5InputTypes.CHECKBOX) {
-                if (this.labelPlacement === 'floating')
+                if (this.labelPlacement === 'floating') {
                     this.labelPlacement = 'end';
+                }
                 this.setValue(this.value);
             }
         }
@@ -7626,8 +7657,18 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
      * @memberOf CrudFieldComponent
      */
     async ngAfterViewInit() {
-        if (this.type === HTML5InputTypes.RADIO && !this.value)
-            this.setValue(this.options[0].value); // TODO: migrate to RenderingEngine
+        if (this.type === HTML5InputTypes.RADIO && this.formGroup && !this.value) {
+            const options = this.options;
+            let checked = options.find((o) => o.checked);
+            if (!checked) {
+                checked = options.find((o) => o.value !== undefined);
+            }
+            if (checked) {
+                this.setValue(checked.value);
+                this.changeDetectorRef.detectChanges();
+            }
+            this.setValue(this.value);
+        }
     }
     /**
      * Returns a list of options for select or radio inputs, with their `text` property
@@ -7694,7 +7735,8 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         const options = (!this.required || (this.options?.length > 1 && this.startEmpty)
             ? [{ value: '', text: '', selected: true, disabled: this.required }, ...this.options]
             : this.options);
-        return (this.options = [...options]);
+        this.options = [...options];
+        return this.options;
     }
     /**
      * Handles the opening of select options based on the specified interface type.
@@ -7753,8 +7795,9 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         this.formControl.updateValueAndValidity();
     }
     isOptionChecked(value) {
-        if (!this.formControl.value || !Array.isArray(this.formControl.value))
+        if (!this.formControl.value || !Array.isArray(this.formControl.value)) {
             return false;
+        }
         return this.formControl.value.includes(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CrudFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -8030,6 +8073,24 @@ class NgxFormDirective extends NgxParentComponentDirective {
         // }
     }
     async ngAfterViewInit() {
+        const formElement = this.component?.nativeElement;
+        // if (this.isModalChild && formElement) {
+        //   const ionContent = await formElement.closest('ion-content');
+        //   const formHeigth = interval(50)
+        //     .pipe(
+        //       map(() => Math.ceil(formElement.getBoundingClientRect().height)),
+        //       filter((h) => h > 0), // só passa quando tiver altura real
+        //       take(1)
+        //     )
+        //     .subscribe(async (height) => {
+        //       const scrollElement = await ionContent.getScrollElement();
+        //       const extraSpace = 24; // margem para evitar corte no final
+        //       const targetHeight = height + extraSpace * 10000;
+        //       this.renderer.setStyle(scrollElement, 'height', `auto !important`);
+        //       this.renderer.setStyle(ionContent, 'min-height', `${targetHeight}px`);
+        //       this.renderer.setStyle(scrollElement, 'overflow-y', 'auto');
+        //     });
+        // }
         //TODO: ver se isso é necessário
         // if (this.formGroup)
         //   this.formGroupLoadedEvent.emit({
@@ -8589,7 +8650,6 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
         this.listenEvent.emit(event);
     }
     toggleCollapse(container) {
-        console.log('toggleCollapse', container);
         this.collapsed = !this.collapsed;
         this.changeDetectorRef.detectChanges();
     }
@@ -10530,7 +10590,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 +11786,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 +14726,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();