@decaf-ts/for-angular 0.1.21 → 0.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { parseValueByType, HTML5InputTypes, UIKeys, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafTranslateService, DecafComponent, ComponentEventNames, UIValidator, RenderingError, UIMediaBreakPoints, LayoutGridGaps, ElementSizes, DecafEventHandler } from '@decaf-ts/ui-decorators';
|
|
1
|
+
import { parseValueByType, HTML5InputTypes, UIKeys, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafTranslateService, DecafComponent, ComponentEventNames, UIValidator, RenderingError, UIMediaBreakPoints, uihandlers, LayoutGridGaps, ElementSizes, DecafEventHandler } from '@decaf-ts/ui-decorators';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
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';
|
|
4
4
|
import * as i1$1 from '@angular/common';
|
|
@@ -4412,13 +4412,11 @@ class NgxComponentDirective extends NgxRepositoryDirective {
|
|
|
4412
4412
|
effect(async () => {
|
|
4413
4413
|
const event = this.popStateSignal();
|
|
4414
4414
|
if (event) {
|
|
4415
|
-
console.log(`Back detectado!' no component ${this.componentName}`);
|
|
4416
4415
|
await this.beforeInitialize(this);
|
|
4417
4416
|
}
|
|
4418
4417
|
});
|
|
4419
4418
|
}
|
|
4420
4419
|
async beforeInitialize(component) {
|
|
4421
|
-
console.log(`calling render for component ${this.componentName}`);
|
|
4422
4420
|
if (!component) {
|
|
4423
4421
|
component = this;
|
|
4424
4422
|
}
|
|
@@ -5692,7 +5690,7 @@ class NgxModelPageDirective extends NgxPageDirective {
|
|
|
5692
5690
|
if (this.isModalChild) {
|
|
5693
5691
|
this.listenEvent.emit({
|
|
5694
5692
|
...event,
|
|
5695
|
-
data: result,
|
|
5693
|
+
data: result || event.data,
|
|
5696
5694
|
});
|
|
5697
5695
|
}
|
|
5698
5696
|
return { ...event, success, message, model: result, aborted: false };
|
|
@@ -7043,6 +7041,7 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
|
|
|
7043
7041
|
* @type {Color}
|
|
7044
7042
|
*/
|
|
7045
7043
|
this.iconColor = 'dark';
|
|
7044
|
+
this.handlers = {};
|
|
7046
7045
|
}
|
|
7047
7046
|
/**
|
|
7048
7047
|
* @description Lifecycle hook that initializes the modal component.
|
|
@@ -7064,6 +7063,12 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
|
|
|
7064
7063
|
async prepare(options = {}) {
|
|
7065
7064
|
this.options = Object.assign({}, DefaultModalOptions, this.options, options);
|
|
7066
7065
|
this.globals = Object.assign({}, this.globals || {}, { isModalChild: true });
|
|
7066
|
+
let handlers = this.globals?.['handlers'] || this.handlers;
|
|
7067
|
+
// binding custom handlers to the model
|
|
7068
|
+
if (Object.keys(handlers).length) {
|
|
7069
|
+
handlers = typeof this.handlers === 'function' ? { confirm: handlers } : handlers;
|
|
7070
|
+
uihandlers(handlers)(this.model.constructor);
|
|
7071
|
+
}
|
|
7067
7072
|
if (this.globals?.['props']) {
|
|
7068
7073
|
this.globals['props'] = Object.assign({}, this.globals['props'], { isModalChild: true });
|
|
7069
7074
|
}
|
|
@@ -7168,7 +7173,7 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
|
|
|
7168
7173
|
await modal.dismiss(event?.data || undefined, ActionRoles.confirm);
|
|
7169
7174
|
}
|
|
7170
7175
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7171
|
-
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" }] }); }
|
|
7176
|
+
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" }] }); }
|
|
7172
7177
|
};
|
|
7173
7178
|
ModalComponent = __decorate([
|
|
7174
7179
|
Dynamic(),
|
|
@@ -7223,6 +7228,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
7223
7228
|
type: Input
|
|
7224
7229
|
}], willDismissEvent: [{
|
|
7225
7230
|
type: Output
|
|
7231
|
+
}], handlers: [{
|
|
7232
|
+
type: Input
|
|
7226
7233
|
}] } });
|
|
7227
7234
|
let ModalConfirmComponent = class ModalConfirmComponent extends ModalComponent {
|
|
7228
7235
|
async ngOnInit() {
|
|
@@ -7300,8 +7307,18 @@ async function getNgxModalComponent(props = {}, modalProps = {}, injector) {
|
|
|
7300
7307
|
* @returns {Promise<IonModal>} - A promise that resolves with the modal instance.
|
|
7301
7308
|
*/
|
|
7302
7309
|
async function getNgxModalCrudComponent(model, props = {}, modalProps = {}, injector) {
|
|
7303
|
-
if (!props || !props?.['operation'])
|
|
7310
|
+
if (!props || !props?.['operation']) {
|
|
7304
7311
|
props.operation = OperationKeys.CREATE;
|
|
7312
|
+
}
|
|
7313
|
+
const { handlers } = props;
|
|
7314
|
+
// if has not custom handlers passed, create a generic confirm handler for crud operations and bind it to the model using uihandlers decorator
|
|
7315
|
+
if (Model.isModel(model) && !handlers) {
|
|
7316
|
+
uihandlers({
|
|
7317
|
+
[ComponentEventNames.Submit]: (event, data, instance) => {
|
|
7318
|
+
instance.listenEvent.emit(event);
|
|
7319
|
+
},
|
|
7320
|
+
})(model.constructor);
|
|
7321
|
+
}
|
|
7305
7322
|
const component = await NgxRenderingEngine.createComponent(ModalComponent, {
|
|
7306
7323
|
model,
|
|
7307
7324
|
globals: props,
|
|
@@ -7615,11 +7632,16 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
|
|
|
7615
7632
|
this.parentForm = this.formGroup.parent;
|
|
7616
7633
|
this.formControl = this.formGroup.get(this.name);
|
|
7617
7634
|
}
|
|
7618
|
-
if (
|
|
7619
|
-
|
|
7635
|
+
if (HTML5InputTypes.SELECT === this.type && !this.value) {
|
|
7636
|
+
if (this.options?.length) {
|
|
7637
|
+
this.setValue(this.options[0].value);
|
|
7638
|
+
this.changeDetectorRef.detectChanges();
|
|
7639
|
+
}
|
|
7640
|
+
}
|
|
7620
7641
|
if (this.type === HTML5InputTypes.CHECKBOX) {
|
|
7621
|
-
if (this.labelPlacement === 'floating')
|
|
7642
|
+
if (this.labelPlacement === 'floating') {
|
|
7622
7643
|
this.labelPlacement = 'end';
|
|
7644
|
+
}
|
|
7623
7645
|
this.setValue(this.value);
|
|
7624
7646
|
}
|
|
7625
7647
|
}
|
|
@@ -7635,8 +7657,18 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
|
|
|
7635
7657
|
* @memberOf CrudFieldComponent
|
|
7636
7658
|
*/
|
|
7637
7659
|
async ngAfterViewInit() {
|
|
7638
|
-
if (this.type === HTML5InputTypes.RADIO && !this.value)
|
|
7639
|
-
this.
|
|
7660
|
+
if (this.type === HTML5InputTypes.RADIO && this.formGroup && !this.value) {
|
|
7661
|
+
const options = this.options;
|
|
7662
|
+
let checked = options.find((o) => o.checked);
|
|
7663
|
+
if (!checked) {
|
|
7664
|
+
checked = options.find((o) => o.value !== undefined);
|
|
7665
|
+
}
|
|
7666
|
+
if (checked) {
|
|
7667
|
+
this.setValue(checked.value);
|
|
7668
|
+
this.changeDetectorRef.detectChanges();
|
|
7669
|
+
}
|
|
7670
|
+
this.setValue(this.value);
|
|
7671
|
+
}
|
|
7640
7672
|
}
|
|
7641
7673
|
/**
|
|
7642
7674
|
* Returns a list of options for select or radio inputs, with their `text` property
|
|
@@ -7703,7 +7735,8 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
|
|
|
7703
7735
|
const options = (!this.required || (this.options?.length > 1 && this.startEmpty)
|
|
7704
7736
|
? [{ value: '', text: '', selected: true, disabled: this.required }, ...this.options]
|
|
7705
7737
|
: this.options);
|
|
7706
|
-
|
|
7738
|
+
this.options = [...options];
|
|
7739
|
+
return this.options;
|
|
7707
7740
|
}
|
|
7708
7741
|
/**
|
|
7709
7742
|
* Handles the opening of select options based on the specified interface type.
|
|
@@ -7762,8 +7795,9 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
|
|
|
7762
7795
|
this.formControl.updateValueAndValidity();
|
|
7763
7796
|
}
|
|
7764
7797
|
isOptionChecked(value) {
|
|
7765
|
-
if (!this.formControl.value || !Array.isArray(this.formControl.value))
|
|
7798
|
+
if (!this.formControl.value || !Array.isArray(this.formControl.value)) {
|
|
7766
7799
|
return false;
|
|
7800
|
+
}
|
|
7767
7801
|
return this.formControl.value.includes(value);
|
|
7768
7802
|
}
|
|
7769
7803
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CrudFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -8039,6 +8073,24 @@ class NgxFormDirective extends NgxParentComponentDirective {
|
|
|
8039
8073
|
// }
|
|
8040
8074
|
}
|
|
8041
8075
|
async ngAfterViewInit() {
|
|
8076
|
+
const formElement = this.component?.nativeElement;
|
|
8077
|
+
// if (this.isModalChild && formElement) {
|
|
8078
|
+
// const ionContent = await formElement.closest('ion-content');
|
|
8079
|
+
// const formHeigth = interval(50)
|
|
8080
|
+
// .pipe(
|
|
8081
|
+
// map(() => Math.ceil(formElement.getBoundingClientRect().height)),
|
|
8082
|
+
// filter((h) => h > 0), // só passa quando tiver altura real
|
|
8083
|
+
// take(1)
|
|
8084
|
+
// )
|
|
8085
|
+
// .subscribe(async (height) => {
|
|
8086
|
+
// const scrollElement = await ionContent.getScrollElement();
|
|
8087
|
+
// const extraSpace = 24; // margem para evitar corte no final
|
|
8088
|
+
// const targetHeight = height + extraSpace * 10000;
|
|
8089
|
+
// this.renderer.setStyle(scrollElement, 'height', `auto !important`);
|
|
8090
|
+
// this.renderer.setStyle(ionContent, 'min-height', `${targetHeight}px`);
|
|
8091
|
+
// this.renderer.setStyle(scrollElement, 'overflow-y', 'auto');
|
|
8092
|
+
// });
|
|
8093
|
+
// }
|
|
8042
8094
|
//TODO: ver se isso é necessário
|
|
8043
8095
|
// if (this.formGroup)
|
|
8044
8096
|
// this.formGroupLoadedEvent.emit({
|
|
@@ -8598,7 +8650,6 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
|
|
|
8598
8650
|
this.listenEvent.emit(event);
|
|
8599
8651
|
}
|
|
8600
8652
|
toggleCollapse(container) {
|
|
8601
|
-
console.log('toggleCollapse', container);
|
|
8602
8653
|
this.collapsed = !this.collapsed;
|
|
8603
8654
|
this.changeDetectorRef.detectChanges();
|
|
8604
8655
|
}
|