@decaf-ts/for-angular 0.1.10 → 0.1.11
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.
- package/fesm2022/decaf-ts-for-angular.mjs +118 -115
- package/fesm2022/decaf-ts-for-angular.mjs.map +1 -1
- package/index.d.ts +2 -1
- package/package.json +1 -1
|
@@ -5623,7 +5623,10 @@ class NgxModelPageDirective extends NgxPageDirective {
|
|
|
5623
5623
|
let result = null;
|
|
5624
5624
|
try {
|
|
5625
5625
|
const repository = await this.getTransactionRepository(event, repo);
|
|
5626
|
-
const { data, role } = event;
|
|
5626
|
+
const { data, role, isModalChild } = event;
|
|
5627
|
+
if (isModalChild) {
|
|
5628
|
+
this.isModalChild = true;
|
|
5629
|
+
}
|
|
5627
5630
|
const operation = (role || this.operation);
|
|
5628
5631
|
if (data) {
|
|
5629
5632
|
if (!pk) {
|
|
@@ -5681,6 +5684,12 @@ class NgxModelPageDirective extends NgxPageDirective {
|
|
|
5681
5684
|
.error(`Error during ${this.operation} operation: ${error instanceof Error ? error.message : error}`);
|
|
5682
5685
|
message = error instanceof Error ? error.message : error;
|
|
5683
5686
|
}
|
|
5687
|
+
if (this.isModalChild) {
|
|
5688
|
+
this.listenEvent.emit({
|
|
5689
|
+
...event,
|
|
5690
|
+
data: result,
|
|
5691
|
+
});
|
|
5692
|
+
}
|
|
5684
5693
|
return { ...event, success, message, model: result, aborted: false };
|
|
5685
5694
|
}
|
|
5686
5695
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgxModelPageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
@@ -6588,84 +6597,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
6588
6597
|
type: Input
|
|
6589
6598
|
}] } });
|
|
6590
6599
|
|
|
6591
|
-
/**
|
|
6592
|
-
* @module module:lib/components/model-renderer/model-renderer.component
|
|
6593
|
-
* @description Model renderer component module.
|
|
6594
|
-
* @summary Exposes `ModelRendererComponent` which dynamically renders UI components
|
|
6595
|
-
* from model definitions using the `NgxRenderingEngine`. It handles model changes,
|
|
6596
|
-
* event subscription and lifecycle for the rendered output.
|
|
6597
|
-
*
|
|
6598
|
-
* @link {@link ModelRendererComponent}
|
|
6599
|
-
*/
|
|
6600
|
-
/**
|
|
6601
|
-
* @description Component for rendering dynamic models
|
|
6602
|
-
* @summary This component is responsible for dynamically rendering models,
|
|
6603
|
-
* handling model changes, and managing event subscriptions for the rendered components.
|
|
6604
|
-
* It uses the NgxRenderingEngine to render the models and supports both string and Model inputs.
|
|
6605
|
-
* @class
|
|
6606
|
-
* @template M - Type extending Model
|
|
6607
|
-
* @param {Injector} injector - Angular Injector for dependency injection
|
|
6608
|
-
* @example
|
|
6609
|
-
* <ngx-decaf-model-renderer
|
|
6610
|
-
* [model]="myModel"
|
|
6611
|
-
* [globals]="globalVariables"
|
|
6612
|
-
* (listenEvent)="handleEvent($event)">
|
|
6613
|
-
* </ngx-decaf-model-renderer>
|
|
6614
|
-
* @mermaid
|
|
6615
|
-
* sequenceDiagram
|
|
6616
|
-
* participant App
|
|
6617
|
-
* participant ModelRenderer
|
|
6618
|
-
* participant RenderingEngine
|
|
6619
|
-
* participant Model
|
|
6620
|
-
* App->>ModelRenderer: Input model
|
|
6621
|
-
* ModelRenderer->>Model: Parse if string
|
|
6622
|
-
* Model-->>ModelRenderer: Parsed model
|
|
6623
|
-
* ModelRenderer->>RenderingEngine: Render model
|
|
6624
|
-
* RenderingEngine-->>ModelRenderer: Rendered output
|
|
6625
|
-
* ModelRenderer->>ModelRenderer: Subscribe to events
|
|
6626
|
-
* ModelRenderer-->>App: Emit events
|
|
6627
|
-
*/
|
|
6628
|
-
class ModelRendererComponent extends NgxRenderableComponentDirective {
|
|
6629
|
-
constructor() {
|
|
6630
|
-
super(...arguments);
|
|
6631
|
-
/**
|
|
6632
|
-
* @description Set if render content projection is allowed
|
|
6633
|
-
* @default true
|
|
6634
|
-
*/
|
|
6635
|
-
this.projectable = true;
|
|
6636
|
-
}
|
|
6637
|
-
// private injector: Injector = inject(Injector);
|
|
6638
|
-
// constructor() {}
|
|
6639
|
-
/**
|
|
6640
|
-
* @description Refreshes the rendered model
|
|
6641
|
-
* @param {string | M} model - The model to be rendered
|
|
6642
|
-
*/
|
|
6643
|
-
async render(model) {
|
|
6644
|
-
model = typeof model === Primitives.STRING ? Model.build({}, String(model)) : model;
|
|
6645
|
-
if (model) {
|
|
6646
|
-
this.output = model.render(this.globals || {}, this.vcr, this.injector, this.inner, this.projectable);
|
|
6647
|
-
if (this.output?.inputs)
|
|
6648
|
-
this.rendererId = sf$1(AngularEngineKeys.RENDERED_ID, this.output.inputs['rendererId']);
|
|
6649
|
-
this.instance = this.output?.component;
|
|
6650
|
-
const { operation } = this.globals || {};
|
|
6651
|
-
// const {inputs} = this.output;
|
|
6652
|
-
// await this.initProps(inputs || {});
|
|
6653
|
-
if (operation) {
|
|
6654
|
-
this.operation = operation;
|
|
6655
|
-
}
|
|
6656
|
-
this.subscribeEvents();
|
|
6657
|
-
}
|
|
6658
|
-
}
|
|
6659
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModelRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6660
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { projectable: "projectable" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: " <!-- Keep to avoid id conflicts -->\n <div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n <ng-template #componentOuter></ng-template>\n <!-- <ng-template #inner>\n <div class=\"dcf-grid dcf-grid-small dcf-model-renderer-component dcf-child-width-1-1\" [id]=\"rendererId || ''\">\n @for (child of output?.children; track child) {\n @if (child?.children?.length) {\n <ngx-decaf-component-renderer [parent]=\"child\" />\n } @else {\n <ng-container\n #childComponents\n *ngComponentOutlet=\"\n child.component;\n injector: child.injector;\n inputs: child.inputs;\n content:child.content;\n \"\n />\n }\n }\n </div>\n </ng-template> -->\n", styles: [""] }); }
|
|
6661
|
-
}
|
|
6662
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModelRendererComponent, decorators: [{
|
|
6663
|
-
type: Component,
|
|
6664
|
-
args: [{ standalone: true, imports: [], selector: 'ngx-decaf-model-renderer', host: { '[attr.id]': 'uid' }, template: " <!-- Keep to avoid id conflicts -->\n <div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n <ng-template #componentOuter></ng-template>\n <!-- <ng-template #inner>\n <div class=\"dcf-grid dcf-grid-small dcf-model-renderer-component dcf-child-width-1-1\" [id]=\"rendererId || ''\">\n @for (child of output?.children; track child) {\n @if (child?.children?.length) {\n <ngx-decaf-component-renderer [parent]=\"child\" />\n } @else {\n <ng-container\n #childComponents\n *ngComponentOutlet=\"\n child.component;\n injector: child.injector;\n inputs: child.inputs;\n content:child.content;\n \"\n />\n }\n }\n </div>\n </ng-template> -->\n" }]
|
|
6665
|
-
}], propDecorators: { projectable: [{
|
|
6666
|
-
type: Input
|
|
6667
|
-
}] } });
|
|
6668
|
-
|
|
6669
6600
|
/**
|
|
6670
6601
|
* @module module:lib/engine/NgxParentComponentDirective
|
|
6671
6602
|
* @description Directive base for parent container components used by the rendering system.
|
|
@@ -6857,6 +6788,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
6857
6788
|
type: Input
|
|
6858
6789
|
}] } });
|
|
6859
6790
|
|
|
6791
|
+
/**
|
|
6792
|
+
* @module module:lib/components/model-renderer/model-renderer.component
|
|
6793
|
+
* @description Model renderer component module.
|
|
6794
|
+
* @summary Exposes `ModelRendererComponent` which dynamically renders UI components
|
|
6795
|
+
* from model definitions using the `NgxRenderingEngine`. It handles model changes,
|
|
6796
|
+
* event subscription and lifecycle for the rendered output.
|
|
6797
|
+
*
|
|
6798
|
+
* @link {@link ModelRendererComponent}
|
|
6799
|
+
*/
|
|
6800
|
+
/**
|
|
6801
|
+
* @description Component for rendering dynamic models
|
|
6802
|
+
* @summary This component is responsible for dynamically rendering models,
|
|
6803
|
+
* handling model changes, and managing event subscriptions for the rendered components.
|
|
6804
|
+
* It uses the NgxRenderingEngine to render the models and supports both string and Model inputs.
|
|
6805
|
+
* @class
|
|
6806
|
+
* @template M - Type extending Model
|
|
6807
|
+
* @param {Injector} injector - Angular Injector for dependency injection
|
|
6808
|
+
* @example
|
|
6809
|
+
* <ngx-decaf-model-renderer
|
|
6810
|
+
* [model]="myModel"
|
|
6811
|
+
* [globals]="globalVariables"
|
|
6812
|
+
* (listenEvent)="handleEvent($event)">
|
|
6813
|
+
* </ngx-decaf-model-renderer>
|
|
6814
|
+
* @mermaid
|
|
6815
|
+
* sequenceDiagram
|
|
6816
|
+
* participant App
|
|
6817
|
+
* participant ModelRenderer
|
|
6818
|
+
* participant RenderingEngine
|
|
6819
|
+
* participant Model
|
|
6820
|
+
* App->>ModelRenderer: Input model
|
|
6821
|
+
* ModelRenderer->>Model: Parse if string
|
|
6822
|
+
* Model-->>ModelRenderer: Parsed model
|
|
6823
|
+
* ModelRenderer->>RenderingEngine: Render model
|
|
6824
|
+
* RenderingEngine-->>ModelRenderer: Rendered output
|
|
6825
|
+
* ModelRenderer->>ModelRenderer: Subscribe to events
|
|
6826
|
+
* ModelRenderer-->>App: Emit events
|
|
6827
|
+
*/
|
|
6828
|
+
class ModelRendererComponent extends NgxRenderableComponentDirective {
|
|
6829
|
+
constructor() {
|
|
6830
|
+
super(...arguments);
|
|
6831
|
+
/**
|
|
6832
|
+
* @description Set if render content projection is allowed
|
|
6833
|
+
* @default true
|
|
6834
|
+
*/
|
|
6835
|
+
this.projectable = true;
|
|
6836
|
+
}
|
|
6837
|
+
// private injector: Injector = inject(Injector);
|
|
6838
|
+
// constructor() {}
|
|
6839
|
+
/**
|
|
6840
|
+
* @description Refreshes the rendered model
|
|
6841
|
+
* @param {string | M} model - The model to be rendered
|
|
6842
|
+
*/
|
|
6843
|
+
async render(model) {
|
|
6844
|
+
model = typeof model === Primitives.STRING ? Model.build({}, String(model)) : model;
|
|
6845
|
+
if (model) {
|
|
6846
|
+
this.output = model.render(this.globals || {}, this.vcr, this.injector, this.inner, this.projectable);
|
|
6847
|
+
if (this.output?.inputs)
|
|
6848
|
+
this.rendererId = sf$1(AngularEngineKeys.RENDERED_ID, this.output.inputs['rendererId']);
|
|
6849
|
+
this.instance = this.output?.component;
|
|
6850
|
+
const { operation } = this.globals || {};
|
|
6851
|
+
// const {inputs} = this.output;
|
|
6852
|
+
// await this.initProps(inputs || {});
|
|
6853
|
+
if (operation) {
|
|
6854
|
+
this.operation = operation;
|
|
6855
|
+
}
|
|
6856
|
+
this.subscribeEvents();
|
|
6857
|
+
}
|
|
6858
|
+
}
|
|
6859
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModelRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6860
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { projectable: "projectable" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: " <!-- Keep to avoid id conflicts -->\n <div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n <ng-template #componentOuter></ng-template>\n <!-- <ng-template #inner>\n <div class=\"dcf-grid dcf-grid-small dcf-model-renderer-component dcf-child-width-1-1\" [id]=\"rendererId || ''\">\n @for (child of output?.children; track child) {\n @if (child?.children?.length) {\n <ngx-decaf-component-renderer [parent]=\"child\" />\n } @else {\n <ng-container\n #childComponents\n *ngComponentOutlet=\"\n child.component;\n injector: child.injector;\n inputs: child.inputs;\n content:child.content;\n \"\n />\n }\n }\n </div>\n </ng-template> -->\n", styles: [""] }); }
|
|
6861
|
+
}
|
|
6862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModelRendererComponent, decorators: [{
|
|
6863
|
+
type: Component,
|
|
6864
|
+
args: [{ standalone: true, imports: [], selector: 'ngx-decaf-model-renderer', host: { '[attr.id]': 'uid' }, template: " <!-- Keep to avoid id conflicts -->\n <div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n <ng-template #componentOuter></ng-template>\n <!-- <ng-template #inner>\n <div class=\"dcf-grid dcf-grid-small dcf-model-renderer-component dcf-child-width-1-1\" [id]=\"rendererId || ''\">\n @for (child of output?.children; track child) {\n @if (child?.children?.length) {\n <ngx-decaf-component-renderer [parent]=\"child\" />\n } @else {\n <ng-container\n #childComponents\n *ngComponentOutlet=\"\n child.component;\n injector: child.injector;\n inputs: child.inputs;\n content:child.content;\n \"\n />\n }\n }\n </div>\n </ng-template> -->\n" }]
|
|
6865
|
+
}], propDecorators: { projectable: [{
|
|
6866
|
+
type: Input
|
|
6867
|
+
}] } });
|
|
6868
|
+
|
|
6860
6869
|
/**
|
|
6861
6870
|
* @description Modal component for displaying dynamic content in a modal dialog.
|
|
6862
6871
|
* @summary This component provides a flexible and reusable modal dialog implementation
|
|
@@ -7094,7 +7103,7 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
|
|
|
7094
7103
|
await modal.dismiss(event?.data || undefined, ActionRoles.confirm);
|
|
7095
7104
|
}
|
|
7096
7105
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7097
|
-
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 size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n <ngx-decaf-icon [color]=\"iconColor\" name=\"ti-x\" />\n </ion-button>\n }\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n\n <ion-content>\n <section class=\"dcf-modal-body\" [class.dcf-has-title]=\"title?.length\">\n @if (!tag && !model && !inlineContent) {\n <div class=\"dcf-loading-container\">\n <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n </div>\n } @else {\n @if (inlineContent && inlineContentPosition === 'top') {\n <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n }\n @if (!tag && model) {\n <ngx-decaf-model-renderer\n (onIonChange)=\"handleEvent($event)\"\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 (onIonChange)=\"handleEvent($event)\"\n (listenEvent)=\"handleEvent($event)\"\n [model]=\"model\"\n [globals]=\"{ props: globals }\"\n />\n }\n @if (inlineContent && inlineContentPosition === 'bottom') {\n <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></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" }] }); }
|
|
7106
|
+
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" }] }); }
|
|
7098
7107
|
};
|
|
7099
7108
|
ModalComponent = __decorate([
|
|
7100
7109
|
Dynamic(),
|
|
@@ -7115,7 +7124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
7115
7124
|
IonHeader,
|
|
7116
7125
|
IonTitle,
|
|
7117
7126
|
IonToolbar,
|
|
7118
|
-
], host: { '[attr.id]': 'uid' }, 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
|
|
7127
|
+
], host: { '[attr.id]': 'uid' }, 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"] }]
|
|
7119
7128
|
}], ctorParameters: () => [], propDecorators: { modal: [{
|
|
7120
7129
|
type: ViewChild,
|
|
7121
7130
|
args: ['component']
|
|
@@ -7693,7 +7702,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
|
|
|
7693
7702
|
return this.formControl.value.includes(value);
|
|
7694
7703
|
}
|
|
7695
7704
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CrudFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7696
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", subType: "subType", validationMessage: "validationMessage", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", startEmpty: "startEmpty", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page" }, host: { properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (\n operation === OperationKeys.READ ||\n operation === OperationKeys.DELETE ||\n readonly\n) {\n @if (!hidden) {\n <ng-container>\n <div>\n <ion-item\n [class.dcf-item-readonly]=\"\n readonly && operation !== OperationKeys.READ\n \"\n [class]=\"'dcf-input-item ' + operation\"\n #component\n >\n <ion-label>\n @if (refreshing) {\n <br />\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n } @else {\n {{ label | translate }}\n <br />\n @if (type !== 'checkbox' && value) {\n <ion-text\n [innerHTML]=\"type === 'password' ? '********' : value\"\n ></ion-text>\n } @else {\n @if (type === 'checkbox') {\n <ion-badge\n mode=\"md\"\n color=\"light\"\n >\n <ion-text [color]=\"!value ? 'danger' : 'primary'\">\n {{ value }}\n </ion-text>\n </ion-badge>\n } @else {\n <ion-text [innerHTML]=\"value\"></ion-text>\n }\n }\n }\n </ion-label>\n </ion-item>\n </div>\n </ng-container>\n }\n} @else {\n @if (formControl) {\n <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n <div\n [id]=\"uid\"\n #container\n [class]=\"'dcf-input-item ' + (operation || 'create')\"\n [class.dcf-field-required]=\"required\"\n [class.dcf-field-readonly]=\"readonly\"\n >\n @if (type === HTML5InputTypes.TEXTAREA) {\n <ion-textarea\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [mode]=\"'md'\"\n [hidden]=\"hidden\"\n [autoGrow]=\"true\"\n [minlength]=\"minlength !== undefined ? minlength : null\"\n [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n [inputmode]=\"inputmode\"\n [spellcheck]=\"spellcheck\"\n [rows]=\"rows\"\n [labelPlacement]=\"labelPlacement\"\n [value]=\"value\"\n [fill]=\"fill\"\n [errorText]=\"getErrors(container)\"\n [placeholder]=\"placeholder | translate\"\n [formControlName]=\"name\"\n [label]=\"label | translate\"\n #component\n ></ion-textarea>\n } @else if (type === HTML5InputTypes.CHECKBOX) {\n @if (!options?.length) {\n <ion-item\n class=\"dcf-width-1-1\"\n [hidden]=\"hidden\"\n >\n <ion-checkbox\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [mode]=\"'md'\"\n [errorText]=\"getErrors(container)\"\n [hidden]=\"hidden\"\n [labelPlacement]=\"labelPlacement\"\n [justify]=\"justify || 'start'\"\n [value]=\"value\"\n [checked]=\"checked\"\n [attr.readonly]=\"readonly\"\n [formControlName]=\"name\"\n #component\n >\n <span>{{ label | translate }}</span>\n </ion-checkbox>\n </ion-item>\n } @else {\n <div class=\"dcf-checkbox-group\">\n <label\n class=\"dcf-label\"\n [for]=\"path\"\n >\n {{ label | translate }}\n </label>\n @for (option of options; track trackItemFn($index, option.text)) {\n <ion-item\n class=\"dcf-width-1-1\"\n [button]=\"true\"\n >\n <ion-checkbox\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"option.text\"\n [mode]=\"'md'\"\n [labelPlacement]=\"labelPlacement\"\n [justify]=\"justify\"\n [value]=\"option.value\"\n [attr.readonly]=\"readonly\"\n [checked]=\"isOptionChecked(option.value)\"\n (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n #component\n >\n <span>\n {{ $index + 1 }}. {{ option?.text | translate }}\n </span>\n </ion-checkbox>\n </ion-item>\n }\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n </div>\n }\n } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n <ion-radio-group\n class=\"dcf-width-1-1\"\n [formControlName]=\"name\"\n [value]=\"value\"\n #component\n >\n <label\n class=\"dcf-radio-group-label\"\n [for]=\"path\"\n >\n {{ label | translate }}\n </label>\n @for (option of options; track $index) {\n <ion-item>\n <ion-radio\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [mode]=\"'md'\"\n [hidden]=\"hidden\"\n [labelPlacement]=\"labelPlacement\"\n [alignment]=\"alignment\"\n [justify]=\"justify\"\n [attr.readonly]=\"readonly\"\n [value]=\"option.value\"\n >\n {{ option?.text | translate }}\n </ion-radio>\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n </ion-item>\n }\n </ion-radio-group>\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n } @else if (type === HTML5InputTypes.SELECT) {\n <div>\n <ion-select\n (ionInput)=\"handleModalChildChanges($event)\"\n (ionChange)=\"handleModalChildChanges($event)\"\n (click)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n toggleIcon=\"chevron-down-outline\"\n expandedIcon=\"chevron-up-outline\"\n [interface]=\"interface\"\n [mode]=\"'md'\"\n [hidden]=\"hidden || !options?.length\"\n [labelPlacement]=\"labelPlacement\"\n [label]=\"label | translate\"\n [value]=\"value ?? null\"\n (click)=\"openSelectOptions($event, interface)\"\n [fill]=\"fill\"\n [placeholder]=\"placeholder | translate\"\n [formControlName]=\"name\"\n [interface]=\"interface\"\n #component\n >\n @if (options?.length) {\n @for (\n option of options;\n track trackItemFn($index, option.text)\n ) {\n <ion-select-option\n [value]=\"option.value\"\n [class.dcf-disabled]=\"option.disabled\"\n [class.dcf-hidden]=\"option.hidden\"\n [hidden]=\"option.hidden\"\n >\n {{ option.text }}\n </ion-select-option>\n }\n }\n @if (\n (value && !required) ||\n (!required && value !== undefined && value !== '')\n ) {\n <ion-button\n fill=\"clear\"\n (click)=\"handleClearValue($event)\"\n slot=\"end\"\n aria-label=\"Show/hide password\"\n >\n <ngx-decaf-icon\n size=\"small\"\n slot=\"icon-only\"\n [name]=\"'ti-input-x'\"\n />\n </ion-button>\n }\n </ion-select>\n <div\n class=\"dcf-error\"\n [class.dcf-options-error]=\"!options?.length\"\n [innerHTML]=\"\n options?.length\n ? getErrors(container)\n : ('errors.empty_options' | translate: { '0': name })\n \"\n ></div>\n </div>\n } @else {\n <ion-input\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [type]=\"type\"\n [mode]=\"'md'\"\n [hidden]=\"hidden\"\n [inputmode]=\"inputmode\"\n [labelPlacement]=\"labelPlacement\"\n [minlength]=\"minlength !== undefined ? minlength : null\"\n [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n [max]=\"max !== undefined ? max : null\"\n [min]=\"min !== undefined ? min : null\"\n [step]=\"step !== undefined ? step : null\"\n [fill]=\"fill\"\n [placeholder]=\"placeholder | translate\"\n [formControlName]=\"name\"\n [errorText]=\"getErrors(container)\"\n [label]=\"label | translate\"\n #component\n />\n\n <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\n }\n </div>\n </ng-container>\n } @else {\n <div>\n <p class=\"dcf-error\">\n {{ 'errors.form.control' | translate: { '0': name } }}\n </p>\n </div>\n }\n}\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important;max-width:200px!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
7705
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", subType: "subType", validationMessage: "validationMessage", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", startEmpty: "startEmpty", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page" }, host: { properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (\n operation === OperationKeys.READ ||\n operation === OperationKeys.DELETE ||\n readonly\n) {\n @if (!hidden) {\n <ng-container>\n <div>\n <ion-item\n [class.dcf-item-readonly]=\"\n readonly && operation !== OperationKeys.READ\n \"\n [class]=\"'dcf-input-item ' + operation\"\n #component\n >\n <ion-label>\n @if (refreshing) {\n <br />\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n } @else {\n {{ label | translate }}\n <br />\n @if (type !== 'checkbox' && value) {\n <ion-text\n [innerHTML]=\"type === 'password' ? '********' : value\"\n ></ion-text>\n } @else {\n @if (type === 'checkbox') {\n <ion-badge\n mode=\"md\"\n color=\"light\"\n >\n <ion-text [color]=\"!value ? 'danger' : 'primary'\">\n {{ value }}\n </ion-text>\n </ion-badge>\n } @else {\n <ion-text [innerHTML]=\"value\"></ion-text>\n }\n }\n }\n </ion-label>\n </ion-item>\n </div>\n </ng-container>\n }\n} @else {\n @if (formControl) {\n <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n <div\n [id]=\"uid\"\n #container\n [class]=\"'dcf-input-item ' + (operation || 'create')\"\n [class.dcf-field-required]=\"required\"\n [class.dcf-field-readonly]=\"readonly\"\n >\n @if (type === HTML5InputTypes.TEXTAREA) {\n <ion-textarea\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [mode]=\"'md'\"\n [hidden]=\"hidden\"\n [autoGrow]=\"true\"\n [minlength]=\"minlength !== undefined ? minlength : null\"\n [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n [inputmode]=\"inputmode\"\n [spellcheck]=\"spellcheck\"\n [rows]=\"rows\"\n [labelPlacement]=\"labelPlacement\"\n [value]=\"value\"\n [fill]=\"fill\"\n [errorText]=\"getErrors(container)\"\n [placeholder]=\"placeholder | translate\"\n [formControlName]=\"name\"\n [label]=\"label | translate\"\n #component\n ></ion-textarea>\n } @else if (type === HTML5InputTypes.CHECKBOX) {\n @if (!options?.length) {\n <ion-item\n class=\"dcf-width-1-1\"\n [hidden]=\"hidden\"\n >\n <ion-checkbox\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [mode]=\"'md'\"\n [errorText]=\"getErrors(container)\"\n [hidden]=\"hidden\"\n [labelPlacement]=\"labelPlacement\"\n [justify]=\"justify || 'start'\"\n [value]=\"value\"\n [checked]=\"checked\"\n [attr.readonly]=\"readonly\"\n [formControlName]=\"name\"\n #component\n >\n <span>{{ label | translate }}</span>\n </ion-checkbox>\n </ion-item>\n } @else {\n <div class=\"dcf-checkbox-group\">\n <label\n class=\"dcf-label\"\n [for]=\"path\"\n >\n {{ label | translate }}\n </label>\n @for (option of options; track trackItemFn($index, option.text)) {\n <ion-item\n class=\"dcf-width-1-1\"\n [button]=\"true\"\n >\n <ion-checkbox\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"option.text\"\n [mode]=\"'md'\"\n [labelPlacement]=\"labelPlacement\"\n [justify]=\"justify\"\n [value]=\"option.value\"\n [attr.readonly]=\"readonly\"\n [checked]=\"isOptionChecked(option.value)\"\n (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n #component\n >\n <span>\n {{ $index + 1 }}.\n {{\n translatable ? (option?.text | translate) : option?.text\n }}\n </span>\n </ion-checkbox>\n </ion-item>\n }\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n </div>\n }\n } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n <ion-radio-group\n class=\"dcf-width-1-1\"\n [formControlName]=\"name\"\n [value]=\"value\"\n #component\n >\n <label\n class=\"dcf-radio-group-label\"\n [for]=\"path\"\n >\n {{ label | translate }}\n </label>\n @for (option of options; track $index) {\n <ion-item>\n <ion-radio\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [mode]=\"'md'\"\n [hidden]=\"hidden\"\n [labelPlacement]=\"labelPlacement\"\n [alignment]=\"alignment\"\n [justify]=\"justify\"\n [attr.readonly]=\"readonly\"\n [value]=\"option.value\"\n >\n {{ translatable ? (option?.text | translate) : option?.text }}\n </ion-radio>\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n </ion-item>\n }\n </ion-radio-group>\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n } @else if (type === HTML5InputTypes.SELECT) {\n <div>\n <ion-select\n (ionInput)=\"handleModalChildChanges($event)\"\n (ionChange)=\"handleModalChildChanges($event)\"\n (click)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n toggleIcon=\"chevron-down-outline\"\n expandedIcon=\"chevron-up-outline\"\n [interface]=\"interface\"\n [mode]=\"'md'\"\n [hidden]=\"hidden || !options?.length\"\n [labelPlacement]=\"labelPlacement\"\n [label]=\"label | translate\"\n [value]=\"value ?? null\"\n (click)=\"openSelectOptions($event, interface)\"\n [fill]=\"fill\"\n [placeholder]=\"placeholder | translate\"\n [formControlName]=\"name\"\n [interface]=\"interface\"\n #component\n >\n @if (options?.length) {\n @for (\n option of options;\n track trackItemFn($index, option.text)\n ) {\n <ion-select-option\n [value]=\"option.value\"\n [class.dcf-disabled]=\"option.disabled\"\n [class.dcf-hidden]=\"option.hidden\"\n [hidden]=\"option.hidden\"\n >\n {{ option.text }}\n </ion-select-option>\n }\n }\n @if (\n (value && !required) ||\n (!required && value !== undefined && value !== '')\n ) {\n <ion-button\n fill=\"clear\"\n (click)=\"handleClearValue($event)\"\n slot=\"end\"\n aria-label=\"Show/hide password\"\n >\n <ngx-decaf-icon\n size=\"small\"\n slot=\"icon-only\"\n [name]=\"'ti-input-x'\"\n />\n </ion-button>\n }\n </ion-select>\n <div\n class=\"dcf-error\"\n [class.dcf-options-error]=\"!options?.length\"\n [innerHTML]=\"\n options?.length\n ? getErrors(container)\n : ('errors.empty_options' | translate: { '0': name })\n \"\n ></div>\n </div>\n } @else {\n <ion-input\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [type]=\"type\"\n [mode]=\"'md'\"\n [hidden]=\"hidden\"\n [inputmode]=\"inputmode\"\n [labelPlacement]=\"labelPlacement\"\n [minlength]=\"minlength !== undefined ? minlength : null\"\n [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n [max]=\"max !== undefined ? max : null\"\n [min]=\"min !== undefined ? min : null\"\n [step]=\"step !== undefined ? step : null\"\n [fill]=\"fill\"\n [placeholder]=\"placeholder | translate\"\n [formControlName]=\"name\"\n [errorText]=\"getErrors(container)\"\n [label]=\"label | translate\"\n #component\n />\n\n <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\n }\n </div>\n </ng-container>\n } @else {\n <div>\n <p class=\"dcf-error\">\n {{ 'errors.form.control' | translate: { '0': name } }}\n </p>\n </div>\n }\n}\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important;max-width:200px!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
7697
7706
|
};
|
|
7698
7707
|
CrudFieldComponent = __decorate([
|
|
7699
7708
|
Dynamic(),
|
|
@@ -7716,7 +7725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
7716
7725
|
IonText,
|
|
7717
7726
|
IonTextarea,
|
|
7718
7727
|
IconComponent,
|
|
7719
|
-
], selector: 'ngx-decaf-crud-field', host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if (\n operation === OperationKeys.READ ||\n operation === OperationKeys.DELETE ||\n readonly\n) {\n @if (!hidden) {\n <ng-container>\n <div>\n <ion-item\n [class.dcf-item-readonly]=\"\n readonly && operation !== OperationKeys.READ\n \"\n [class]=\"'dcf-input-item ' + operation\"\n #component\n >\n <ion-label>\n @if (refreshing) {\n <br />\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n } @else {\n {{ label | translate }}\n <br />\n @if (type !== 'checkbox' && value) {\n <ion-text\n [innerHTML]=\"type === 'password' ? '********' : value\"\n ></ion-text>\n } @else {\n @if (type === 'checkbox') {\n <ion-badge\n mode=\"md\"\n color=\"light\"\n >\n <ion-text [color]=\"!value ? 'danger' : 'primary'\">\n {{ value }}\n </ion-text>\n </ion-badge>\n } @else {\n <ion-text [innerHTML]=\"value\"></ion-text>\n }\n }\n }\n </ion-label>\n </ion-item>\n </div>\n </ng-container>\n }\n} @else {\n @if (formControl) {\n <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n <div\n [id]=\"uid\"\n #container\n [class]=\"'dcf-input-item ' + (operation || 'create')\"\n [class.dcf-field-required]=\"required\"\n [class.dcf-field-readonly]=\"readonly\"\n >\n @if (type === HTML5InputTypes.TEXTAREA) {\n <ion-textarea\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [mode]=\"'md'\"\n [hidden]=\"hidden\"\n [autoGrow]=\"true\"\n [minlength]=\"minlength !== undefined ? minlength : null\"\n [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n [inputmode]=\"inputmode\"\n [spellcheck]=\"spellcheck\"\n [rows]=\"rows\"\n [labelPlacement]=\"labelPlacement\"\n [value]=\"value\"\n [fill]=\"fill\"\n [errorText]=\"getErrors(container)\"\n [placeholder]=\"placeholder | translate\"\n [formControlName]=\"name\"\n [label]=\"label | translate\"\n #component\n ></ion-textarea>\n } @else if (type === HTML5InputTypes.CHECKBOX) {\n @if (!options?.length) {\n <ion-item\n class=\"dcf-width-1-1\"\n [hidden]=\"hidden\"\n >\n <ion-checkbox\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [mode]=\"'md'\"\n [errorText]=\"getErrors(container)\"\n [hidden]=\"hidden\"\n [labelPlacement]=\"labelPlacement\"\n [justify]=\"justify || 'start'\"\n [value]=\"value\"\n [checked]=\"checked\"\n [attr.readonly]=\"readonly\"\n [formControlName]=\"name\"\n #component\n >\n <span>{{ label | translate }}</span>\n </ion-checkbox>\n </ion-item>\n } @else {\n <div class=\"dcf-checkbox-group\">\n <label\n class=\"dcf-label\"\n [for]=\"path\"\n >\n {{ label | translate }}\n </label>\n @for (option of options; track trackItemFn($index, option.text)) {\n <ion-item\n class=\"dcf-width-1-1\"\n [button]=\"true\"\n >\n <ion-checkbox\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"option.text\"\n [mode]=\"'md'\"\n [labelPlacement]=\"labelPlacement\"\n [justify]=\"justify\"\n [value]=\"option.value\"\n [attr.readonly]=\"readonly\"\n [checked]=\"isOptionChecked(option.value)\"\n (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n #component\n >\n <span>\n {{ $index + 1 }}. {{ option?.text | translate }}\n </span>\n </ion-checkbox>\n </ion-item>\n }\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n </div>\n }\n } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n <ion-radio-group\n class=\"dcf-width-1-1\"\n [formControlName]=\"name\"\n [value]=\"value\"\n #component\n >\n <label\n class=\"dcf-radio-group-label\"\n [for]=\"path\"\n >\n {{ label | translate }}\n </label>\n @for (option of options; track $index) {\n <ion-item>\n <ion-radio\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [mode]=\"'md'\"\n [hidden]=\"hidden\"\n [labelPlacement]=\"labelPlacement\"\n [alignment]=\"alignment\"\n [justify]=\"justify\"\n [attr.readonly]=\"readonly\"\n [value]=\"option.value\"\n >\n {{ option?.text | translate }}\n </ion-radio>\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n </ion-item>\n }\n </ion-radio-group>\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n } @else if (type === HTML5InputTypes.SELECT) {\n <div>\n <ion-select\n (ionInput)=\"handleModalChildChanges($event)\"\n (ionChange)=\"handleModalChildChanges($event)\"\n (click)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n toggleIcon=\"chevron-down-outline\"\n expandedIcon=\"chevron-up-outline\"\n [interface]=\"interface\"\n [mode]=\"'md'\"\n [hidden]=\"hidden || !options?.length\"\n [labelPlacement]=\"labelPlacement\"\n [label]=\"label | translate\"\n [value]=\"value ?? null\"\n (click)=\"openSelectOptions($event, interface)\"\n [fill]=\"fill\"\n [placeholder]=\"placeholder | translate\"\n [formControlName]=\"name\"\n [interface]=\"interface\"\n #component\n >\n @if (options?.length) {\n @for (\n option of options;\n track trackItemFn($index, option.text)\n ) {\n <ion-select-option\n [value]=\"option.value\"\n [class.dcf-disabled]=\"option.disabled\"\n [class.dcf-hidden]=\"option.hidden\"\n [hidden]=\"option.hidden\"\n >\n {{ option.text }}\n </ion-select-option>\n }\n }\n @if (\n (value && !required) ||\n (!required && value !== undefined && value !== '')\n ) {\n <ion-button\n fill=\"clear\"\n (click)=\"handleClearValue($event)\"\n slot=\"end\"\n aria-label=\"Show/hide password\"\n >\n <ngx-decaf-icon\n size=\"small\"\n slot=\"icon-only\"\n [name]=\"'ti-input-x'\"\n />\n </ion-button>\n }\n </ion-select>\n <div\n class=\"dcf-error\"\n [class.dcf-options-error]=\"!options?.length\"\n [innerHTML]=\"\n options?.length\n ? getErrors(container)\n : ('errors.empty_options' | translate: { '0': name })\n \"\n ></div>\n </div>\n } @else {\n <ion-input\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [type]=\"type\"\n [mode]=\"'md'\"\n [hidden]=\"hidden\"\n [inputmode]=\"inputmode\"\n [labelPlacement]=\"labelPlacement\"\n [minlength]=\"minlength !== undefined ? minlength : null\"\n [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n [max]=\"max !== undefined ? max : null\"\n [min]=\"min !== undefined ? min : null\"\n [step]=\"step !== undefined ? step : null\"\n [fill]=\"fill\"\n [placeholder]=\"placeholder | translate\"\n [formControlName]=\"name\"\n [errorText]=\"getErrors(container)\"\n [label]=\"label | translate\"\n #component\n />\n\n <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\n }\n </div>\n </ng-container>\n } @else {\n <div>\n <p class=\"dcf-error\">\n {{ 'errors.form.control' | translate: { '0': name } }}\n </p>\n </div>\n }\n}\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important;max-width:200px!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
|
|
7728
|
+
], selector: 'ngx-decaf-crud-field', host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if (\n operation === OperationKeys.READ ||\n operation === OperationKeys.DELETE ||\n readonly\n) {\n @if (!hidden) {\n <ng-container>\n <div>\n <ion-item\n [class.dcf-item-readonly]=\"\n readonly && operation !== OperationKeys.READ\n \"\n [class]=\"'dcf-input-item ' + operation\"\n #component\n >\n <ion-label>\n @if (refreshing) {\n <br />\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n } @else {\n {{ label | translate }}\n <br />\n @if (type !== 'checkbox' && value) {\n <ion-text\n [innerHTML]=\"type === 'password' ? '********' : value\"\n ></ion-text>\n } @else {\n @if (type === 'checkbox') {\n <ion-badge\n mode=\"md\"\n color=\"light\"\n >\n <ion-text [color]=\"!value ? 'danger' : 'primary'\">\n {{ value }}\n </ion-text>\n </ion-badge>\n } @else {\n <ion-text [innerHTML]=\"value\"></ion-text>\n }\n }\n }\n </ion-label>\n </ion-item>\n </div>\n </ng-container>\n }\n} @else {\n @if (formControl) {\n <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n <div\n [id]=\"uid\"\n #container\n [class]=\"'dcf-input-item ' + (operation || 'create')\"\n [class.dcf-field-required]=\"required\"\n [class.dcf-field-readonly]=\"readonly\"\n >\n @if (type === HTML5InputTypes.TEXTAREA) {\n <ion-textarea\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [mode]=\"'md'\"\n [hidden]=\"hidden\"\n [autoGrow]=\"true\"\n [minlength]=\"minlength !== undefined ? minlength : null\"\n [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n [inputmode]=\"inputmode\"\n [spellcheck]=\"spellcheck\"\n [rows]=\"rows\"\n [labelPlacement]=\"labelPlacement\"\n [value]=\"value\"\n [fill]=\"fill\"\n [errorText]=\"getErrors(container)\"\n [placeholder]=\"placeholder | translate\"\n [formControlName]=\"name\"\n [label]=\"label | translate\"\n #component\n ></ion-textarea>\n } @else if (type === HTML5InputTypes.CHECKBOX) {\n @if (!options?.length) {\n <ion-item\n class=\"dcf-width-1-1\"\n [hidden]=\"hidden\"\n >\n <ion-checkbox\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [mode]=\"'md'\"\n [errorText]=\"getErrors(container)\"\n [hidden]=\"hidden\"\n [labelPlacement]=\"labelPlacement\"\n [justify]=\"justify || 'start'\"\n [value]=\"value\"\n [checked]=\"checked\"\n [attr.readonly]=\"readonly\"\n [formControlName]=\"name\"\n #component\n >\n <span>{{ label | translate }}</span>\n </ion-checkbox>\n </ion-item>\n } @else {\n <div class=\"dcf-checkbox-group\">\n <label\n class=\"dcf-label\"\n [for]=\"path\"\n >\n {{ label | translate }}\n </label>\n @for (option of options; track trackItemFn($index, option.text)) {\n <ion-item\n class=\"dcf-width-1-1\"\n [button]=\"true\"\n >\n <ion-checkbox\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"option.text\"\n [mode]=\"'md'\"\n [labelPlacement]=\"labelPlacement\"\n [justify]=\"justify\"\n [value]=\"option.value\"\n [attr.readonly]=\"readonly\"\n [checked]=\"isOptionChecked(option.value)\"\n (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n #component\n >\n <span>\n {{ $index + 1 }}.\n {{\n translatable ? (option?.text | translate) : option?.text\n }}\n </span>\n </ion-checkbox>\n </ion-item>\n }\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n </div>\n }\n } @else if (type === HTML5InputTypes.RADIO && options?.length) {\n <ion-radio-group\n class=\"dcf-width-1-1\"\n [formControlName]=\"name\"\n [value]=\"value\"\n #component\n >\n <label\n class=\"dcf-radio-group-label\"\n [for]=\"path\"\n >\n {{ label | translate }}\n </label>\n @for (option of options; track $index) {\n <ion-item>\n <ion-radio\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [mode]=\"'md'\"\n [hidden]=\"hidden\"\n [labelPlacement]=\"labelPlacement\"\n [alignment]=\"alignment\"\n [justify]=\"justify\"\n [attr.readonly]=\"readonly\"\n [value]=\"option.value\"\n >\n {{ translatable ? (option?.text | translate) : option?.text }}\n </ion-radio>\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n </ion-item>\n }\n </ion-radio-group>\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n } @else if (type === HTML5InputTypes.SELECT) {\n <div>\n <ion-select\n (ionInput)=\"handleModalChildChanges($event)\"\n (ionChange)=\"handleModalChildChanges($event)\"\n (click)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n toggleIcon=\"chevron-down-outline\"\n expandedIcon=\"chevron-up-outline\"\n [interface]=\"interface\"\n [mode]=\"'md'\"\n [hidden]=\"hidden || !options?.length\"\n [labelPlacement]=\"labelPlacement\"\n [label]=\"label | translate\"\n [value]=\"value ?? null\"\n (click)=\"openSelectOptions($event, interface)\"\n [fill]=\"fill\"\n [placeholder]=\"placeholder | translate\"\n [formControlName]=\"name\"\n [interface]=\"interface\"\n #component\n >\n @if (options?.length) {\n @for (\n option of options;\n track trackItemFn($index, option.text)\n ) {\n <ion-select-option\n [value]=\"option.value\"\n [class.dcf-disabled]=\"option.disabled\"\n [class.dcf-hidden]=\"option.hidden\"\n [hidden]=\"option.hidden\"\n >\n {{ option.text }}\n </ion-select-option>\n }\n }\n @if (\n (value && !required) ||\n (!required && value !== undefined && value !== '')\n ) {\n <ion-button\n fill=\"clear\"\n (click)=\"handleClearValue($event)\"\n slot=\"end\"\n aria-label=\"Show/hide password\"\n >\n <ngx-decaf-icon\n size=\"small\"\n slot=\"icon-only\"\n [name]=\"'ti-input-x'\"\n />\n </ion-button>\n }\n </ion-select>\n <div\n class=\"dcf-error\"\n [class.dcf-options-error]=\"!options?.length\"\n [innerHTML]=\"\n options?.length\n ? getErrors(container)\n : ('errors.empty_options' | translate: { '0': name })\n \"\n ></div>\n </div>\n } @else {\n <ion-input\n (ionInput)=\"handleModalChildChanges($event, formControl)\"\n (ionChange)=\"handleModalChildChanges($event, formControl)\"\n [id]=\"name\"\n [type]=\"type\"\n [mode]=\"'md'\"\n [hidden]=\"hidden\"\n [inputmode]=\"inputmode\"\n [labelPlacement]=\"labelPlacement\"\n [minlength]=\"minlength !== undefined ? minlength : null\"\n [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n [attr.readonly]=\"readonly !== undefined ? readonly : null\"\n [max]=\"max !== undefined ? max : null\"\n [min]=\"min !== undefined ? min : null\"\n [step]=\"step !== undefined ? step : null\"\n [fill]=\"fill\"\n [placeholder]=\"placeholder | translate\"\n [formControlName]=\"name\"\n [errorText]=\"getErrors(container)\"\n [label]=\"label | translate\"\n #component\n />\n\n <!-- <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span> -->\n }\n </div>\n </ng-container>\n } @else {\n <div>\n <p class=\"dcf-error\">\n {{ 'errors.form.control' | translate: { '0': name } }}\n </p>\n </div>\n }\n}\n", styles: [".dcf-item-readonly .create ion-label,.dcf-item-readonly .update ion-label{font-weight:600;transform:translatey(-.8rem)}.dcf-item-readonly .create ion-label ion-text,.dcf-item-readonly .update ion-label ion-text{font-weight:initial;position:relative;top:.8rem}ion-badge{font-weight:600!important;margin-top:.25rem;font-weight:600}ion-badge ion-text{font-weight:600;text-transform:capitalize}ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error.dcf-options-error{position:relative;margin-bottom:.25rem!important;max-width:200px!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
|
|
7720
7729
|
}], ctorParameters: () => [], propDecorators: { operation: [{
|
|
7721
7730
|
type: Input,
|
|
7722
7731
|
args: [{ required: true }]
|
|
@@ -8042,12 +8051,13 @@ class NgxFormDirective extends NgxParentComponentDirective {
|
|
|
8042
8051
|
event.stopImmediatePropagation();
|
|
8043
8052
|
}
|
|
8044
8053
|
const formGroup = this.formGroup;
|
|
8045
|
-
this.changeDetectorRef.detectChanges();
|
|
8046
8054
|
const isValid = NgxFormService.validateFields(formGroup);
|
|
8047
8055
|
if (!isValid) {
|
|
8056
|
+
this.changeDetectorRef.detectChanges();
|
|
8048
8057
|
NgxFormService.enableAllGroupControls(formGroup);
|
|
8049
8058
|
return false;
|
|
8050
8059
|
}
|
|
8060
|
+
this.changeDetectorRef.detectChanges();
|
|
8051
8061
|
const data = NgxFormService.getFormData(formGroup);
|
|
8052
8062
|
if (Object.keys(data).length > 0)
|
|
8053
8063
|
return this.submitEventEmit(data, eventName, componentName, this.handlers);
|
|
@@ -8423,12 +8433,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
|
|
|
8423
8433
|
length = row.cols.reduce((acc, curr) => {
|
|
8424
8434
|
if (rowsLength > 1)
|
|
8425
8435
|
return acc + (typeof curr['col'] === Primitives.NUMBER ? curr['col'] : 1);
|
|
8426
|
-
return (acc +
|
|
8427
|
-
(typeof curr['col'] === Primitives.NUMBER
|
|
8428
|
-
? curr['col']
|
|
8429
|
-
: curr['col'] === 'full'
|
|
8430
|
-
? 0
|
|
8431
|
-
: curr['col']));
|
|
8436
|
+
return (acc + (typeof curr['col'] === Primitives.NUMBER ? curr['col'] : curr['col'] === 'full' ? 0 : curr['col']));
|
|
8432
8437
|
}, 0);
|
|
8433
8438
|
}
|
|
8434
8439
|
}
|
|
@@ -8471,8 +8476,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
|
|
|
8471
8476
|
let row = child.props?.['row'] ?? 1;
|
|
8472
8477
|
if (row > rowsLength)
|
|
8473
8478
|
row = rowsLength;
|
|
8474
|
-
child['col'] =
|
|
8475
|
-
child.props?.['col'] ?? this.cols?.length ?? 1;
|
|
8479
|
+
child['col'] = child.props?.['col'] ?? this.cols?.length ?? 1;
|
|
8476
8480
|
if (row === index + 1)
|
|
8477
8481
|
return child;
|
|
8478
8482
|
}),
|
|
@@ -8486,18 +8490,12 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
|
|
|
8486
8490
|
col = col === 'half' ? '1-2' : col === 'full' ? '1-1' : col;
|
|
8487
8491
|
if (!this.flexMode) {
|
|
8488
8492
|
if (typeof col === Primitives.NUMBER) {
|
|
8489
|
-
col =
|
|
8490
|
-
col === colsLength
|
|
8491
|
-
? `1-1`
|
|
8492
|
-
: col > colsLength
|
|
8493
|
-
? `${colsLength}-${col}`
|
|
8494
|
-
: `${col}-${colsLength}`;
|
|
8493
|
+
col = col === colsLength ? `1-1` : col > colsLength ? `${colsLength}-${col}` : `${col}-${colsLength}`;
|
|
8495
8494
|
}
|
|
8496
8495
|
}
|
|
8497
8496
|
else {
|
|
8498
8497
|
if (typeof col === Primitives.NUMBER)
|
|
8499
|
-
col =
|
|
8500
|
-
colsLength <= this.maxColsLength ? `${col}-${colsLength}` : `${index + 1}-${col}`;
|
|
8498
|
+
col = colsLength <= this.maxColsLength ? `${col}-${colsLength}` : `${index + 1}-${col}`;
|
|
8501
8499
|
col = ['2-4', '3-6'].includes(col) ? `1-2` : col;
|
|
8502
8500
|
}
|
|
8503
8501
|
col = `dcf-child-${col}-${this.breakpoint} dcf-width-${col}`;
|
|
@@ -8533,7 +8531,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
|
|
|
8533
8531
|
await super.initialize();
|
|
8534
8532
|
}
|
|
8535
8533
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8536
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n @if (initialized) {\n @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n @if (row?.cols?.length) {\n <div\n [id]=\"uid\"\n [class]=\"\n (!grid
|
|
8534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n @if (initialized) {\n @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n @if (row?.cols?.length) {\n <div\n [id]=\"uid\"\n [class]=\"\n (!grid\n ? 'dcf-layout-row '\n : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n ' ' +\n (className || '')\n \"\n [class.dcf-grid-match]=\"match\"\n [class.dcf-grid-bordered]=\"borders\"\n >\n @if (row?.title?.length) {\n <div class=\"dcf-width-1-1 dcf-grid-title\">\n <h3 class=\"\">{{ row.title | translate }}</h3>\n </div>\n }\n @for (\n child of row.cols;\n track trackItemFn($index, child.col);\n let colIndex = $index\n ) {\n <div\n [class]=\"'dcf-grid-col ' + child.colClass\"\n [class.dcf-first-column]=\"$index === 0\"\n [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n >\n <div>\n @if (child.tag === 'ngx-decaf-crud-form') {\n <ngx-decaf-card\n [className]=\"\n (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n className\n \"\n [body]=\"cardBody\"\n [type]=\"cardType\"\n >\n <ngx-decaf-model-renderer\n [model]=\"child.props.name\"\n [pk]=\"pk\"\n (listenEvent)=\"handleEvent($event)\"\n />\n </ngx-decaf-card>\n } @else {\n @if (refreshing) {\n <ion-item>\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n </ion-item>\n } @else {\n <ngx-decaf-component-renderer\n [tag]=\"child.tag\"\n [pk]=\"pk\"\n [className]=\"\n (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n className\n \"\n [parentForm]=\"\n parentForm || child.parentForm || child?.formGroup\n \"\n [children]=\"child?.children || []\"\n (listenEvent)=\"handleEvent($event)\"\n [globals]=\"{ props: child.props }\"\n />\n }\n }\n </div>\n </div>\n }\n </div>\n }\n }\n }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
8537
8535
|
};
|
|
8538
8536
|
LayoutComponent = __decorate([
|
|
8539
8537
|
Dynamic(),
|
|
@@ -8541,7 +8539,7 @@ LayoutComponent = __decorate([
|
|
|
8541
8539
|
], LayoutComponent);
|
|
8542
8540
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
8543
8541
|
type: Component,
|
|
8544
|
-
args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n @if (initialized) {\n @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n @if (row?.cols?.length) {\n <div\n [id]=\"uid\"\n [class]=\"\n (!grid
|
|
8542
|
+
args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n @if (initialized) {\n @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n @if (row?.cols?.length) {\n <div\n [id]=\"uid\"\n [class]=\"\n (!grid\n ? 'dcf-layout-row '\n : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n ' ' +\n (className || '')\n \"\n [class.dcf-grid-match]=\"match\"\n [class.dcf-grid-bordered]=\"borders\"\n >\n @if (row?.title?.length) {\n <div class=\"dcf-width-1-1 dcf-grid-title\">\n <h3 class=\"\">{{ row.title | translate }}</h3>\n </div>\n }\n @for (\n child of row.cols;\n track trackItemFn($index, child.col);\n let colIndex = $index\n ) {\n <div\n [class]=\"'dcf-grid-col ' + child.colClass\"\n [class.dcf-first-column]=\"$index === 0\"\n [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n >\n <div>\n @if (child.tag === 'ngx-decaf-crud-form') {\n <ngx-decaf-card\n [className]=\"\n (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n className\n \"\n [body]=\"cardBody\"\n [type]=\"cardType\"\n >\n <ngx-decaf-model-renderer\n [model]=\"child.props.name\"\n [pk]=\"pk\"\n (listenEvent)=\"handleEvent($event)\"\n />\n </ngx-decaf-card>\n } @else {\n @if (refreshing) {\n <ion-item>\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n </ion-item>\n } @else {\n <ngx-decaf-component-renderer\n [tag]=\"child.tag\"\n [pk]=\"pk\"\n [className]=\"\n (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n className\n \"\n [parentForm]=\"\n parentForm || child.parentForm || child?.formGroup\n \"\n [children]=\"child?.children || []\"\n (listenEvent)=\"handleEvent($event)\"\n [globals]=\"{ props: child.props }\"\n />\n }\n }\n </div>\n </div>\n }\n </div>\n }\n }\n }\n</section>\n", styles: [".dcf-grid:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
|
|
8545
8543
|
}], ctorParameters: () => [], propDecorators: { gap: [{
|
|
8546
8544
|
type: Input
|
|
8547
8545
|
}], grid: [{
|
|
@@ -8593,7 +8591,7 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
|
|
|
8593
8591
|
super.submitEventEmit(this.model, 'CrudFormComponent', ComponentEventNames.Submit, this.handlers, OperationKeys.DELETE);
|
|
8594
8592
|
}
|
|
8595
8593
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8596
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { showCancelButton: "showCancelButton" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n <form\n [class]=\"'dcf-form-grid ' + operation\"\n #component\n [id]=\"rendererId\"\n [formGroup]=\"formGroup\"\n (ngSubmit)=\"submit($event)\"\n novalidate\n [target]=\"target\"\n >\n @if (!children?.length) {\n <ng-content #formContent></ng-content>\n } @else {\n <ngx-decaf-layout\n [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n [children]=\"children || []\"\n [pk]=\"pk\"\n (listenEvent)=\"handleEvent($event)\"\n [parentForm]=\"formGroup || parentForm\"\n [operation]=\"operation\"\n [modelId]=\"modelId\"\n [cardType]=\"cardType ?? 'blank'\"\n [match]=\"match ?? false\"\n [refreshing]=\"refreshing\"\n [gap]=\"'small'\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n }\n @if (initialized) {\n <div\n class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n >\n @if (!action) {\n <div [class.dcf-hidden]=\"!showCancelButton\">\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (options.buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.clear?.iconSlot\"\n [name]=\"options.buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n locale +\n '.' +\n (allowClear ? options.buttons.clear?.text : 'back')\n | translate\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n type=\"submit\"\n [expand]=\"action ? 'block' : 'default'\"\n >\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : (locale + '.' + options.buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n </div>\n }\n </form>\n} @else {\n <section\n #component\n [id]=\"uid\"\n >\n <ngx-decaf-layout\n [className]=\"''\"\n [pk]=\"pk\"\n [modelId]=\"modelId\"\n [children]=\"children || []\"\n [operation]=\"operation\"\n [cardType]=\"cardType ?? 'blank'\"\n [modelId]=\"modelId\"\n [match]=\"match ?? false\"\n [gap]=\"'small'\"\n (listenEvent)=\"handleEvent($event)\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n </section>\n\n <section\n [class]=\"\n 'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' +\n operation\n \"\n [id]=\"uid\"\n >\n @if ([OperationKeys.DELETE].includes(operation) && modelId) {\n <div>\n <ion-button\n (click)=\"handleDelete()\"\n color=\"danger\"\n type=\"button\"\n >\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{ locale + '.delete' | translate }}\n </ion-button>\n </div>\n }\n @if (\n operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE\n ) {\n <div>\n <ion-button type=\"submit\">\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : (locale + '.' + options.buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (options.buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.clear?.iconSlot\"\n [name]=\"options.buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n [\n OperationKeys.DELETE,\n OperationKeys.READ,\n OperationKeys.UPDATE,\n ].includes(operation)\n ? (locale + '.back' | translate)\n : options.buttons.clear?.text\n }}\n </ion-button>\n </div>\n </section>\n}\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
8594
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { showCancelButton: "showCancelButton" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n <form\n [class]=\"'dcf-form-grid ' + operation\"\n #component\n [id]=\"rendererId\"\n [formGroup]=\"formGroup\"\n (ngSubmit)=\"submit($event)\"\n novalidate\n [target]=\"target\"\n >\n @if (!children?.length) {\n <ng-content #formContent></ng-content>\n } @else {\n <ngx-decaf-layout\n [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n [children]=\"children || []\"\n [isModalChild]=\"isModalChild\"\n [pk]=\"pk\"\n (listenEvent)=\"handleEvent($event)\"\n [parentForm]=\"formGroup || parentForm\"\n [operation]=\"operation\"\n [modelId]=\"modelId\"\n [cardType]=\"cardType ?? 'blank'\"\n [match]=\"match ?? false\"\n [refreshing]=\"refreshing\"\n [gap]=\"'small'\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n }\n @if (initialized) {\n <div\n class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n >\n @if (!action) {\n <div [class.dcf-hidden]=\"!showCancelButton\">\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (options.buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.clear?.iconSlot\"\n [name]=\"options.buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n locale +\n '.' +\n (allowClear ? options.buttons.clear?.text : 'back')\n | translate\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n type=\"submit\"\n [expand]=\"action ? 'block' : 'default'\"\n >\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : (locale + '.' + options.buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n </div>\n }\n </form>\n} @else {\n <section\n #component\n [id]=\"uid\"\n >\n <ngx-decaf-layout\n [className]=\"''\"\n [pk]=\"pk\"\n [isModalChild]=\"isModalChild\"\n [modelId]=\"modelId\"\n [children]=\"children || []\"\n [operation]=\"operation\"\n [cardType]=\"cardType ?? 'blank'\"\n [modelId]=\"modelId\"\n [match]=\"match ?? false\"\n [gap]=\"'small'\"\n [isModalChild]=\"isModalChild\"\n (listenEvent)=\"handleEvent($event)\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n </section>\n\n <section\n [class]=\"\n 'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' +\n operation\n \"\n [id]=\"uid\"\n >\n @if ([OperationKeys.DELETE].includes(operation) && modelId) {\n <div>\n <ion-button\n (click)=\"handleDelete()\"\n color=\"danger\"\n type=\"button\"\n >\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{ locale + '.delete' | translate }}\n </ion-button>\n </div>\n }\n @if (\n operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE\n ) {\n <div>\n <ion-button type=\"submit\">\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : (locale + '.' + options.buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (options.buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.clear?.iconSlot\"\n [name]=\"options.buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n [\n OperationKeys.DELETE,\n OperationKeys.READ,\n OperationKeys.UPDATE,\n ].includes(operation)\n ? (locale + '.back' | translate)\n : options.buttons.clear?.text\n }}\n </ion-button>\n </div>\n </section>\n}\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
8597
8595
|
};
|
|
8598
8596
|
CrudFormComponent = __decorate([
|
|
8599
8597
|
Dynamic(),
|
|
@@ -8601,7 +8599,7 @@ CrudFormComponent = __decorate([
|
|
|
8601
8599
|
], CrudFormComponent);
|
|
8602
8600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CrudFormComponent, decorators: [{
|
|
8603
8601
|
type: Component,
|
|
8604
|
-
args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [TranslatePipe, ReactiveFormsModule, LayoutComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n <form\n [class]=\"'dcf-form-grid ' + operation\"\n #component\n [id]=\"rendererId\"\n [formGroup]=\"formGroup\"\n (ngSubmit)=\"submit($event)\"\n novalidate\n [target]=\"target\"\n >\n @if (!children?.length) {\n <ng-content #formContent></ng-content>\n } @else {\n <ngx-decaf-layout\n [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n [children]=\"children || []\"\n [pk]=\"pk\"\n (listenEvent)=\"handleEvent($event)\"\n [parentForm]=\"formGroup || parentForm\"\n [operation]=\"operation\"\n [modelId]=\"modelId\"\n [cardType]=\"cardType ?? 'blank'\"\n [match]=\"match ?? false\"\n [refreshing]=\"refreshing\"\n [gap]=\"'small'\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n }\n @if (initialized) {\n <div\n class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n >\n @if (!action) {\n <div [class.dcf-hidden]=\"!showCancelButton\">\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (options.buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.clear?.iconSlot\"\n [name]=\"options.buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n locale +\n '.' +\n (allowClear ? options.buttons.clear?.text : 'back')\n | translate\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n type=\"submit\"\n [expand]=\"action ? 'block' : 'default'\"\n >\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : (locale + '.' + options.buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n </div>\n }\n </form>\n} @else {\n <section\n #component\n [id]=\"uid\"\n >\n <ngx-decaf-layout\n [className]=\"''\"\n [pk]=\"pk\"\n [modelId]=\"modelId\"\n [children]=\"children || []\"\n [operation]=\"operation\"\n [cardType]=\"cardType ?? 'blank'\"\n [modelId]=\"modelId\"\n [match]=\"match ?? false\"\n [gap]=\"'small'\"\n (listenEvent)=\"handleEvent($event)\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n </section>\n\n <section\n [class]=\"\n 'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' +\n operation\n \"\n [id]=\"uid\"\n >\n @if ([OperationKeys.DELETE].includes(operation) && modelId) {\n <div>\n <ion-button\n (click)=\"handleDelete()\"\n color=\"danger\"\n type=\"button\"\n >\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{ locale + '.delete' | translate }}\n </ion-button>\n </div>\n }\n @if (\n operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE\n ) {\n <div>\n <ion-button type=\"submit\">\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : (locale + '.' + options.buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (options.buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.clear?.iconSlot\"\n [name]=\"options.buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n [\n OperationKeys.DELETE,\n OperationKeys.READ,\n OperationKeys.UPDATE,\n ].includes(operation)\n ? (locale + '.back' | translate)\n : options.buttons.clear?.text\n }}\n </ion-button>\n </div>\n </section>\n}\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
|
|
8602
|
+
args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [TranslatePipe, ReactiveFormsModule, LayoutComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n <form\n [class]=\"'dcf-form-grid ' + operation\"\n #component\n [id]=\"rendererId\"\n [formGroup]=\"formGroup\"\n (ngSubmit)=\"submit($event)\"\n novalidate\n [target]=\"target\"\n >\n @if (!children?.length) {\n <ng-content #formContent></ng-content>\n } @else {\n <ngx-decaf-layout\n [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n [children]=\"children || []\"\n [isModalChild]=\"isModalChild\"\n [pk]=\"pk\"\n (listenEvent)=\"handleEvent($event)\"\n [parentForm]=\"formGroup || parentForm\"\n [operation]=\"operation\"\n [modelId]=\"modelId\"\n [cardType]=\"cardType ?? 'blank'\"\n [match]=\"match ?? false\"\n [refreshing]=\"refreshing\"\n [gap]=\"'small'\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n }\n @if (initialized) {\n <div\n class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n >\n @if (!action) {\n <div [class.dcf-hidden]=\"!showCancelButton\">\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (options.buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.clear?.iconSlot\"\n [name]=\"options.buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n locale +\n '.' +\n (allowClear ? options.buttons.clear?.text : 'back')\n | translate\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n type=\"submit\"\n [expand]=\"action ? 'block' : 'default'\"\n >\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : (locale + '.' + options.buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n </div>\n }\n </form>\n} @else {\n <section\n #component\n [id]=\"uid\"\n >\n <ngx-decaf-layout\n [className]=\"''\"\n [pk]=\"pk\"\n [isModalChild]=\"isModalChild\"\n [modelId]=\"modelId\"\n [children]=\"children || []\"\n [operation]=\"operation\"\n [cardType]=\"cardType ?? 'blank'\"\n [modelId]=\"modelId\"\n [match]=\"match ?? false\"\n [gap]=\"'small'\"\n [isModalChild]=\"isModalChild\"\n (listenEvent)=\"handleEvent($event)\"\n [flexMode]=\"props.flexMode || false\"\n [rows]=\"rows\"\n [borders]=\"borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [cols]=\"cols\"\n />\n </section>\n\n <section\n [class]=\"\n 'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' +\n operation\n \"\n [id]=\"uid\"\n >\n @if ([OperationKeys.DELETE].includes(operation) && modelId) {\n <div>\n <ion-button\n (click)=\"handleDelete()\"\n color=\"danger\"\n type=\"button\"\n >\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{ locale + '.delete' | translate }}\n </ion-button>\n </div>\n }\n @if (\n operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE\n ) {\n <div>\n <ion-button type=\"submit\">\n @if (options.buttons.submit.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.submit.iconSlot\"\n [name]=\"options.buttons.submit.icon\"\n ></ion-icon>\n }\n {{\n action\n ? action\n : (locale + '.' + options.buttons.submit.text | translate)\n }}\n </ion-button>\n </div>\n }\n <div>\n <ion-button\n fill=\"clear\"\n (click)=\"handleReset()\"\n >\n @if (options.buttons.clear?.icon) {\n <ion-icon\n aria-hidden=\"true\"\n [slot]=\"options.buttons.clear?.iconSlot\"\n [name]=\"options.buttons.clear?.icon\"\n ></ion-icon>\n }\n {{\n [\n OperationKeys.DELETE,\n OperationKeys.READ,\n OperationKeys.UPDATE,\n ].includes(operation)\n ? (locale + '.back' | translate)\n : options.buttons.clear?.text\n }}\n </ion-button>\n </div>\n </section>\n}\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
|
|
8605
8603
|
}], ctorParameters: () => [], propDecorators: { showCancelButton: [{
|
|
8606
8604
|
type: Input
|
|
8607
8605
|
}] } });
|
|
@@ -9562,9 +9560,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
|
|
|
9562
9560
|
* @memberOf FieldsetComponent
|
|
9563
9561
|
*/
|
|
9564
9562
|
handleEmitEvent(value, operation) {
|
|
9565
|
-
if (this._repository &&
|
|
9566
|
-
this.operation === OperationKeys.UPDATE &&
|
|
9567
|
-
value[this.pk] !== undefined) {
|
|
9563
|
+
if (this._repository && this.operation === OperationKeys.UPDATE && value[this.pk] !== undefined) {
|
|
9568
9564
|
this.listenEvent.emit({
|
|
9569
9565
|
name: ComponentEventNames.Submit,
|
|
9570
9566
|
role: operation,
|
|
@@ -9652,11 +9648,15 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
|
|
|
9652
9648
|
return Object.entries(v).some(([k, v]) => k !== 'index' && v !== undefined && String(v).trim().length);
|
|
9653
9649
|
})
|
|
9654
9650
|
.map((v, index) => {
|
|
9655
|
-
|
|
9651
|
+
const item = {
|
|
9656
9652
|
...itemMapper(Object.assign({}, v), this.mapper, {
|
|
9657
9653
|
[this.pk]: this.pk || undefined,
|
|
9658
9654
|
}),
|
|
9659
|
-
|
|
9655
|
+
};
|
|
9656
|
+
index = v.index > 1 ? v.index : index + 1;
|
|
9657
|
+
return {
|
|
9658
|
+
...item,
|
|
9659
|
+
index,
|
|
9660
9660
|
};
|
|
9661
9661
|
}),
|
|
9662
9662
|
];
|
|
@@ -9680,8 +9680,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
|
|
|
9680
9680
|
this.mapper['title'] = this.pk;
|
|
9681
9681
|
this.mapper['index'] = 'index';
|
|
9682
9682
|
for (const key in value) {
|
|
9683
|
-
if (Object.keys(this.mapper).length >= 2 ||
|
|
9684
|
-
Object.keys(this.mapper).length === Object.keys(value).length)
|
|
9683
|
+
if (Object.keys(this.mapper).length >= 2 || Object.keys(this.mapper).length === Object.keys(value).length)
|
|
9685
9684
|
break;
|
|
9686
9685
|
if (!this.mapper['title']) {
|
|
9687
9686
|
this.mapper['title'] = key;
|
|
@@ -9693,7 +9692,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
|
|
|
9693
9692
|
return this.mapper;
|
|
9694
9693
|
}
|
|
9695
9694
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9696
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, usesInheritance: true, ngImport: i0, template: "@if (['create', 'update'].includes(operation) || !multiple) {\n <div\n [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n [class]=\"'dcf-fieldset-component ' + operation\"\n [class.dcf-blank]=\"!borders\"\n [class.dcf-empty]=\"!items?.length\"\n [class.dcf-open]=\"isOpen\"\n #component\n >\n <div class=\"dcf-width-1-1\">\n <div>\n <div\n class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n >\n <div class=\"dcf-width-expand\">\n <legend>{{ (title ? title : name) | translate }}</legend>\n </div>\n @if (!isRequired && ['create'].includes(operation) && multiple) {\n <div class=\"dcf-width-auto dcf-delete\">\n <ion-button\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleClear($event)\"\n [class.dcf-invisible]=\"!isOpen\"\n [attr.aria-label]=\"\n (items?.length\n ? locale + '.clear_items'\n : locale + '.hidden_form'\n ) | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n />\n </ion-button>\n </div>\n }\n </div>\n </div>\n <div\n class=\"dcf-fieldset-content\"\n [class.dcf-empty]=\"!items?.length && !isOpen\"\n slot=\"content\"\n >\n @if (activePage) {\n <div\n class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n [class.dcf-disabled]=\"!activePage\"\n >\n <ngx-decaf-layout\n [className]=\"''\"\n [flexMode]=\"props.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'small'\"\n [pk]=\"pk\"\n [modelId]=\"modelId\"\n [operation]=\"operation\"\n [children]=\"activePage || []\"\n [parentForm]=\"formGroup || parentForm\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"activePage?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [hidden]=\"items.length === max && !updatingItem\"\n />\n </div>\n }\n\n @if (multiple && ['create', 'update'].includes(operation)) {\n @if (multiple && items.length) {\n <ion-list class=\"dcf-fields-list\">\n <ion-reorder-group\n [formGroup]=\"formGroup.parent\"\n [disabled]=\"updatingItem\"\n (ionItemReorder)=\"handleReorderItems($any($event))\"\n #accordionComponent\n >\n @for (item of items; track item.index) {\n <ion-item\n [class.not-unique]=\"\n isUniqueError && item.title === isUniqueError\n \"\n [class.updating]=\"\n updatingItem?.['index'] === item.index - 1\n \"\n lines=\"full\"\n [button]=\"false\"\n [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n >\n @if (ordenable) {\n @if (items?.length > 1 && !updatingItem) {\n <ion-reorder slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n name=\"swap-vertical-outline\"\n ></ion-icon>\n </ion-reorder>\n } @else {\n <div slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n class=\"dcf-reorder-disabled\"\n size=\"small\"\n name=\"swap-vertical-outline\"\n disabled\n ></ion-icon>\n </div>\n }\n }\n\n <ion-label\n [color]=\"\n item.title === isUniqueError &&\n !updatingItem?.[pk] === item.title\n ? 'danger'\n : ''\n \"\n >\n {{ item.index }}.{{ item.title }}\n <!-- @if (ordenable) {\n {{ item.index }}.{{ item.title }}\n } @else {\n @if (item[pk]) {\n {{ pk }}: {{ item[pk] }} -\n }\n {{ item.title }}\n } -->\n @if (item.description?.length > 0) {\n <br />\n <ion-text class=\"dcf-subtitle\">\n {{ item.description }}\n </ion-text>\n }\n </ion-label>\n @if (item.info?.length || item.subinfo?.length) {\n <ion-note slot=\"end\">\n @if (item.info?.length) {\n {{ item.info }}\n <br />\n }\n @if (item.subinfo) {\n {{ item.subinfo }}\n }\n </ion-note>\n }\n <div slot=\"end\">\n @if (editable) {\n @if (\n !updatingItem || updatingItem?.[pk] !== item.title\n ) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleUpdateItem($index)\"\n [attr.aria-label]=\"\n locale + '.edit_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-cash-edit\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n ></ngx-decaf-icon>\n </ion-button>\n }\n }\n @if (!updatingItem) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n color=\"danger\"\n (click)=\"handleRemoveItem($index)\"\n [attr.aria-label]=\"\n locale + '.remove_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-row-remove\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n />\n </ion-button>\n }\n </div>\n </ion-item>\n }\n </ion-reorder-group>\n </ion-list>\n }\n\n @if (isUniqueError) {\n <div\n class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n >\n <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n <div\n class=\"dcf-auto\"\n [attr.style]=\"'max-width: 50px'\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"alert-circle-outline\"\n ></ion-icon>\n </div>\n <div class=\"dcf-width-expand\">\n <ion-text\n color=\"danger\"\n class=\"dcf-text-small\"\n >\n {{\n locale + '.not_unique'\n | translate: { value: isUniqueError }\n }}\n </ion-text>\n </div>\n </div>\n </div>\n }\n\n @if (max) {\n <div class=\"dcf-width-1-1 dcf-max-message-container\">\n <ion-text\n class=\"dcf-text-small\"\n [color]=\"\n items.length !== max\n ? !isDarkMode\n ? 'medium'\n : ''\n : 'primary'\n \"\n >\n {{\n locale +\n (items.length !== max ? '.max_items' : '.max_items_reached')\n | translate: { '0': max }\n }}\n </ion-text>\n </div>\n }\n\n <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n @if (updatingItem) {\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n color=\"danger\"\n (click)=\"handleCancelUpdateItem()\"\n [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n >\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.update_item' | translate\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"refresh-outline\"\n slot=\"start\"\n ></ion-icon>\n {{ locale + '.update_item' | translate }}\n </ion-button>\n </div>\n } @else {\n @if (items.length < max || !max) {\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n class=\"dcf-button-add\"\n [color]=\"isDarkMode ? 'light' : 'dark'\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.create_item' | translate\"\n >\n <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n <ngx-decaf-icon\n slot=\"icon-only\"\n name=\"ti-code-plus\"\n slot=\"start\"\n />\n {{\n locale +\n (required\n ? items.length\n ? '.add'\n : '.add_first'\n : items.length\n ? '.add'\n : isOpen\n ? '.add_first'\n : '.show_form') | translate\n }}\n </ion-button>\n </div>\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n} @else {\n @if (refreshing) {\n <div class=\"dcf-loading-container\">\n <ion-spinner\n name=\"crescent\"\n color=\"primary\"\n ></ion-spinner>\n </div>\n } @else {\n <legend>{{ (title ? title : name) | translate }}</legend>\n @if (!items.length) {\n <div class=\"dcf-padding-xsmall\">\n <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n </div>\n } @else {\n @for (item of items; track trackItemFn($index, item)) {\n <div class=\"dcf-fieldset-read-item\">\n <div>\n <ngx-decaf-layout\n [className]=\"operation\"\n [operation]=\"operation\"\n [pk]=\"pk\"\n [model]=\"model\"\n [modelId]=\"modelId\"\n [flexMode]=\"item?.props?.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'collapse'\"\n [children]=\"item || []\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"item?.props?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n />\n </div>\n </div>\n }\n }\n }\n}\n", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-6)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
9695
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, usesInheritance: true, ngImport: i0, template: "@if (['create', 'update'].includes(operation) || !multiple) {\n <div\n [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n [class]=\"'dcf-fieldset-component ' + operation\"\n [class.dcf-blank]=\"!borders\"\n [class.dcf-empty]=\"!items?.length\"\n [class.dcf-open]=\"isOpen\"\n #component\n >\n <div class=\"dcf-width-1-1\">\n <div>\n <div\n class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n >\n <div class=\"dcf-width-expand\">\n <legend>{{ (title ? title : name) | translate }}</legend>\n </div>\n @if (!isRequired && ['create'].includes(operation) && multiple) {\n <div class=\"dcf-width-auto dcf-delete\">\n <ion-button\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleClear($event)\"\n [class.dcf-invisible]=\"!isOpen\"\n [attr.aria-label]=\"\n (items?.length\n ? locale + '.clear_items'\n : locale + '.hidden_form'\n ) | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n />\n </ion-button>\n </div>\n }\n </div>\n </div>\n <div\n class=\"dcf-fieldset-content\"\n [class.dcf-empty]=\"!items?.length && !isOpen\"\n slot=\"content\"\n >\n @if (activePage) {\n <div\n class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n [class.dcf-disabled]=\"!activePage\"\n >\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"''\"\n [flexMode]=\"props.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'small'\"\n [pk]=\"pk\"\n [modelId]=\"modelId\"\n [operation]=\"operation\"\n [children]=\"activePage || []\"\n [parentForm]=\"formGroup || parentForm\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"activePage?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [hidden]=\"items.length === max && !updatingItem\"\n />\n </div>\n }\n\n @if (multiple && ['create', 'update'].includes(operation)) {\n @if (multiple && items.length) {\n <ion-list class=\"dcf-fields-list\">\n <ion-reorder-group\n [formGroup]=\"formGroup.parent\"\n [disabled]=\"updatingItem\"\n (ionItemReorder)=\"handleReorderItems($any($event))\"\n #accordionComponent\n >\n @for (item of items; track item.index) {\n <ion-item\n [class.not-unique]=\"\n isUniqueError && item.title === isUniqueError\n \"\n [class.updating]=\"\n updatingItem?.['index'] === item.index - 1\n \"\n lines=\"full\"\n [button]=\"false\"\n [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n >\n @if (ordenable) {\n @if (items?.length > 1 && !updatingItem) {\n <ion-reorder slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n name=\"swap-vertical-outline\"\n ></ion-icon>\n </ion-reorder>\n } @else {\n <div slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n class=\"dcf-reorder-disabled\"\n size=\"small\"\n name=\"swap-vertical-outline\"\n disabled\n ></ion-icon>\n </div>\n }\n }\n\n <ion-label\n [color]=\"\n item.title === isUniqueError &&\n !updatingItem?.[pk] === item.title\n ? 'danger'\n : ''\n \"\n >\n {{ $index + 1 }}.{{ item.title }}\n <!-- @if (ordenable) {\n {{ item.index }}.{{ item.title }}\n } @else {\n @if (item[pk]) {\n {{ pk }}: {{ item[pk] }} -\n }\n {{ item.title }}\n } -->\n @if (item.description?.length > 0) {\n <br />\n <ion-text class=\"dcf-subtitle\">\n {{ item.description }}\n </ion-text>\n }\n </ion-label>\n @if (item.info?.length || item.subinfo?.length) {\n <ion-note slot=\"end\">\n @if (item.info?.length) {\n {{ item.info }}\n <br />\n }\n @if (item.subinfo) {\n {{ item.subinfo }}\n }\n </ion-note>\n }\n <div slot=\"end\">\n @if (editable) {\n @if (\n !updatingItem || updatingItem?.[pk] !== item.title\n ) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleUpdateItem($index)\"\n [attr.aria-label]=\"\n locale + '.edit_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-cash-edit\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n ></ngx-decaf-icon>\n </ion-button>\n }\n }\n @if (!updatingItem) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n color=\"danger\"\n (click)=\"handleRemoveItem($index)\"\n [attr.aria-label]=\"\n locale + '.remove_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-row-remove\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n />\n </ion-button>\n }\n </div>\n </ion-item>\n }\n </ion-reorder-group>\n </ion-list>\n }\n\n @if (isUniqueError) {\n <div\n class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n >\n <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n <div\n class=\"dcf-auto\"\n [attr.style]=\"'max-width: 50px'\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"alert-circle-outline\"\n ></ion-icon>\n </div>\n <div class=\"dcf-width-expand\">\n <ion-text\n color=\"danger\"\n class=\"dcf-text-small\"\n >\n {{\n locale + '.not_unique'\n | translate: { value: isUniqueError }\n }}\n </ion-text>\n </div>\n </div>\n </div>\n }\n\n @if (max) {\n <div class=\"dcf-width-1-1 dcf-max-message-container\">\n <ion-text\n class=\"dcf-text-small\"\n [color]=\"\n items.length !== max\n ? !isDarkMode\n ? 'medium'\n : ''\n : 'primary'\n \"\n >\n {{\n locale +\n (items.length !== max ? '.max_items' : '.max_items_reached')\n | translate: { '0': max }\n }}\n </ion-text>\n </div>\n }\n\n <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n @if (updatingItem) {\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n color=\"danger\"\n (click)=\"handleCancelUpdateItem()\"\n [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n >\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.update_item' | translate\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"refresh-outline\"\n slot=\"start\"\n ></ion-icon>\n {{ locale + '.update_item' | translate }}\n </ion-button>\n </div>\n } @else {\n @if (items.length < max || !max) {\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n class=\"dcf-button-add\"\n [color]=\"isDarkMode ? 'light' : 'dark'\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.create_item' | translate\"\n >\n <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n <ngx-decaf-icon\n slot=\"icon-only\"\n name=\"ti-code-plus\"\n slot=\"start\"\n />\n {{\n locale +\n (required\n ? items.length\n ? '.add'\n : '.add_first'\n : items.length\n ? '.add'\n : isOpen\n ? '.add_first'\n : '.show_form') | translate\n }}\n </ion-button>\n </div>\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n} @else {\n @if (refreshing) {\n <div class=\"dcf-loading-container\">\n <ion-spinner\n name=\"crescent\"\n color=\"primary\"\n ></ion-spinner>\n </div>\n } @else {\n <legend>{{ (title ? title : name) | translate }}</legend>\n @if (!items.length) {\n <div class=\"dcf-padding-xsmall\">\n <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n </div>\n } @else {\n @for (item of items; track trackItemFn($index, item)) {\n <div class=\"dcf-fieldset-read-item\">\n <div>\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"operation\"\n [operation]=\"operation\"\n [pk]=\"pk\"\n [model]=\"model\"\n [modelId]=\"modelId\"\n [flexMode]=\"item?.props?.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'collapse'\"\n [children]=\"item || []\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"item?.props?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n />\n </div>\n </div>\n }\n }\n }\n}\n", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-6)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
9697
9696
|
};
|
|
9698
9697
|
FieldsetComponent = __decorate([
|
|
9699
9698
|
Dynamic(),
|
|
@@ -9715,7 +9714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
9715
9714
|
LayoutComponent,
|
|
9716
9715
|
IonSpinner,
|
|
9717
9716
|
IconComponent,
|
|
9718
|
-
], template: "@if (['create', 'update'].includes(operation) || !multiple) {\n <div\n [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n [class]=\"'dcf-fieldset-component ' + operation\"\n [class.dcf-blank]=\"!borders\"\n [class.dcf-empty]=\"!items?.length\"\n [class.dcf-open]=\"isOpen\"\n #component\n >\n <div class=\"dcf-width-1-1\">\n <div>\n <div\n class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n >\n <div class=\"dcf-width-expand\">\n <legend>{{ (title ? title : name) | translate }}</legend>\n </div>\n @if (!isRequired && ['create'].includes(operation) && multiple) {\n <div class=\"dcf-width-auto dcf-delete\">\n <ion-button\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleClear($event)\"\n [class.dcf-invisible]=\"!isOpen\"\n [attr.aria-label]=\"\n (items?.length\n ? locale + '.clear_items'\n : locale + '.hidden_form'\n ) | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n />\n </ion-button>\n </div>\n }\n </div>\n </div>\n <div\n class=\"dcf-fieldset-content\"\n [class.dcf-empty]=\"!items?.length && !isOpen\"\n slot=\"content\"\n >\n @if (activePage) {\n <div\n class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n [class.dcf-disabled]=\"!activePage\"\n >\n <ngx-decaf-layout\n [className]=\"''\"\n [flexMode]=\"props.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'small'\"\n [pk]=\"pk\"\n [modelId]=\"modelId\"\n [operation]=\"operation\"\n [children]=\"activePage || []\"\n [parentForm]=\"formGroup || parentForm\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"activePage?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [hidden]=\"items.length === max && !updatingItem\"\n />\n </div>\n }\n\n @if (multiple && ['create', 'update'].includes(operation)) {\n @if (multiple && items.length) {\n <ion-list class=\"dcf-fields-list\">\n <ion-reorder-group\n [formGroup]=\"formGroup.parent\"\n [disabled]=\"updatingItem\"\n (ionItemReorder)=\"handleReorderItems($any($event))\"\n #accordionComponent\n >\n @for (item of items; track item.index) {\n <ion-item\n [class.not-unique]=\"\n isUniqueError && item.title === isUniqueError\n \"\n [class.updating]=\"\n updatingItem?.['index'] === item.index - 1\n \"\n lines=\"full\"\n [button]=\"false\"\n [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n >\n @if (ordenable) {\n @if (items?.length > 1 && !updatingItem) {\n <ion-reorder slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n name=\"swap-vertical-outline\"\n ></ion-icon>\n </ion-reorder>\n } @else {\n <div slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n class=\"dcf-reorder-disabled\"\n size=\"small\"\n name=\"swap-vertical-outline\"\n disabled\n ></ion-icon>\n </div>\n }\n }\n\n <ion-label\n [color]=\"\n item.title === isUniqueError &&\n !updatingItem?.[pk] === item.title\n ? 'danger'\n : ''\n \"\n >\n {{ item.index }}.{{ item.title }}\n <!-- @if (ordenable) {\n {{ item.index }}.{{ item.title }}\n } @else {\n @if (item[pk]) {\n {{ pk }}: {{ item[pk] }} -\n }\n {{ item.title }}\n } -->\n @if (item.description?.length > 0) {\n <br />\n <ion-text class=\"dcf-subtitle\">\n {{ item.description }}\n </ion-text>\n }\n </ion-label>\n @if (item.info?.length || item.subinfo?.length) {\n <ion-note slot=\"end\">\n @if (item.info?.length) {\n {{ item.info }}\n <br />\n }\n @if (item.subinfo) {\n {{ item.subinfo }}\n }\n </ion-note>\n }\n <div slot=\"end\">\n @if (editable) {\n @if (\n !updatingItem || updatingItem?.[pk] !== item.title\n ) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleUpdateItem($index)\"\n [attr.aria-label]=\"\n locale + '.edit_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-cash-edit\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n ></ngx-decaf-icon>\n </ion-button>\n }\n }\n @if (!updatingItem) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n color=\"danger\"\n (click)=\"handleRemoveItem($index)\"\n [attr.aria-label]=\"\n locale + '.remove_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-row-remove\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n />\n </ion-button>\n }\n </div>\n </ion-item>\n }\n </ion-reorder-group>\n </ion-list>\n }\n\n @if (isUniqueError) {\n <div\n class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n >\n <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n <div\n class=\"dcf-auto\"\n [attr.style]=\"'max-width: 50px'\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"alert-circle-outline\"\n ></ion-icon>\n </div>\n <div class=\"dcf-width-expand\">\n <ion-text\n color=\"danger\"\n class=\"dcf-text-small\"\n >\n {{\n locale + '.not_unique'\n | translate: { value: isUniqueError }\n }}\n </ion-text>\n </div>\n </div>\n </div>\n }\n\n @if (max) {\n <div class=\"dcf-width-1-1 dcf-max-message-container\">\n <ion-text\n class=\"dcf-text-small\"\n [color]=\"\n items.length !== max\n ? !isDarkMode\n ? 'medium'\n : ''\n : 'primary'\n \"\n >\n {{\n locale +\n (items.length !== max ? '.max_items' : '.max_items_reached')\n | translate: { '0': max }\n }}\n </ion-text>\n </div>\n }\n\n <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n @if (updatingItem) {\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n color=\"danger\"\n (click)=\"handleCancelUpdateItem()\"\n [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n >\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.update_item' | translate\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"refresh-outline\"\n slot=\"start\"\n ></ion-icon>\n {{ locale + '.update_item' | translate }}\n </ion-button>\n </div>\n } @else {\n @if (items.length < max || !max) {\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n class=\"dcf-button-add\"\n [color]=\"isDarkMode ? 'light' : 'dark'\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.create_item' | translate\"\n >\n <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n <ngx-decaf-icon\n slot=\"icon-only\"\n name=\"ti-code-plus\"\n slot=\"start\"\n />\n {{\n locale +\n (required\n ? items.length\n ? '.add'\n : '.add_first'\n : items.length\n ? '.add'\n : isOpen\n ? '.add_first'\n : '.show_form') | translate\n }}\n </ion-button>\n </div>\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n} @else {\n @if (refreshing) {\n <div class=\"dcf-loading-container\">\n <ion-spinner\n name=\"crescent\"\n color=\"primary\"\n ></ion-spinner>\n </div>\n } @else {\n <legend>{{ (title ? title : name) | translate }}</legend>\n @if (!items.length) {\n <div class=\"dcf-padding-xsmall\">\n <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n </div>\n } @else {\n @for (item of items; track trackItemFn($index, item)) {\n <div class=\"dcf-fieldset-read-item\">\n <div>\n <ngx-decaf-layout\n [className]=\"operation\"\n [operation]=\"operation\"\n [pk]=\"pk\"\n [model]=\"model\"\n [modelId]=\"modelId\"\n [flexMode]=\"item?.props?.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'collapse'\"\n [children]=\"item || []\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"item?.props?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n />\n </div>\n </div>\n }\n }\n }\n}\n", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-6)}\n"] }]
|
|
9717
|
+
], template: "@if (['create', 'update'].includes(operation) || !multiple) {\n <div\n [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n [class]=\"'dcf-fieldset-component ' + operation\"\n [class.dcf-blank]=\"!borders\"\n [class.dcf-empty]=\"!items?.length\"\n [class.dcf-open]=\"isOpen\"\n #component\n >\n <div class=\"dcf-width-1-1\">\n <div>\n <div\n class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n >\n <div class=\"dcf-width-expand\">\n <legend>{{ (title ? title : name) | translate }}</legend>\n </div>\n @if (!isRequired && ['create'].includes(operation) && multiple) {\n <div class=\"dcf-width-auto dcf-delete\">\n <ion-button\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleClear($event)\"\n [class.dcf-invisible]=\"!isOpen\"\n [attr.aria-label]=\"\n (items?.length\n ? locale + '.clear_items'\n : locale + '.hidden_form'\n ) | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n />\n </ion-button>\n </div>\n }\n </div>\n </div>\n <div\n class=\"dcf-fieldset-content\"\n [class.dcf-empty]=\"!items?.length && !isOpen\"\n slot=\"content\"\n >\n @if (activePage) {\n <div\n class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n [class.dcf-disabled]=\"!activePage\"\n >\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"''\"\n [flexMode]=\"props.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'small'\"\n [pk]=\"pk\"\n [modelId]=\"modelId\"\n [operation]=\"operation\"\n [children]=\"activePage || []\"\n [parentForm]=\"formGroup || parentForm\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"activePage?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [hidden]=\"items.length === max && !updatingItem\"\n />\n </div>\n }\n\n @if (multiple && ['create', 'update'].includes(operation)) {\n @if (multiple && items.length) {\n <ion-list class=\"dcf-fields-list\">\n <ion-reorder-group\n [formGroup]=\"formGroup.parent\"\n [disabled]=\"updatingItem\"\n (ionItemReorder)=\"handleReorderItems($any($event))\"\n #accordionComponent\n >\n @for (item of items; track item.index) {\n <ion-item\n [class.not-unique]=\"\n isUniqueError && item.title === isUniqueError\n \"\n [class.updating]=\"\n updatingItem?.['index'] === item.index - 1\n \"\n lines=\"full\"\n [button]=\"false\"\n [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n >\n @if (ordenable) {\n @if (items?.length > 1 && !updatingItem) {\n <ion-reorder slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n name=\"swap-vertical-outline\"\n ></ion-icon>\n </ion-reorder>\n } @else {\n <div slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n class=\"dcf-reorder-disabled\"\n size=\"small\"\n name=\"swap-vertical-outline\"\n disabled\n ></ion-icon>\n </div>\n }\n }\n\n <ion-label\n [color]=\"\n item.title === isUniqueError &&\n !updatingItem?.[pk] === item.title\n ? 'danger'\n : ''\n \"\n >\n {{ $index + 1 }}.{{ item.title }}\n <!-- @if (ordenable) {\n {{ item.index }}.{{ item.title }}\n } @else {\n @if (item[pk]) {\n {{ pk }}: {{ item[pk] }} -\n }\n {{ item.title }}\n } -->\n @if (item.description?.length > 0) {\n <br />\n <ion-text class=\"dcf-subtitle\">\n {{ item.description }}\n </ion-text>\n }\n </ion-label>\n @if (item.info?.length || item.subinfo?.length) {\n <ion-note slot=\"end\">\n @if (item.info?.length) {\n {{ item.info }}\n <br />\n }\n @if (item.subinfo) {\n {{ item.subinfo }}\n }\n </ion-note>\n }\n <div slot=\"end\">\n @if (editable) {\n @if (\n !updatingItem || updatingItem?.[pk] !== item.title\n ) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleUpdateItem($index)\"\n [attr.aria-label]=\"\n locale + '.edit_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-cash-edit\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n ></ngx-decaf-icon>\n </ion-button>\n }\n }\n @if (!updatingItem) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n color=\"danger\"\n (click)=\"handleRemoveItem($index)\"\n [attr.aria-label]=\"\n locale + '.remove_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-row-remove\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n />\n </ion-button>\n }\n </div>\n </ion-item>\n }\n </ion-reorder-group>\n </ion-list>\n }\n\n @if (isUniqueError) {\n <div\n class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n >\n <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n <div\n class=\"dcf-auto\"\n [attr.style]=\"'max-width: 50px'\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"alert-circle-outline\"\n ></ion-icon>\n </div>\n <div class=\"dcf-width-expand\">\n <ion-text\n color=\"danger\"\n class=\"dcf-text-small\"\n >\n {{\n locale + '.not_unique'\n | translate: { value: isUniqueError }\n }}\n </ion-text>\n </div>\n </div>\n </div>\n }\n\n @if (max) {\n <div class=\"dcf-width-1-1 dcf-max-message-container\">\n <ion-text\n class=\"dcf-text-small\"\n [color]=\"\n items.length !== max\n ? !isDarkMode\n ? 'medium'\n : ''\n : 'primary'\n \"\n >\n {{\n locale +\n (items.length !== max ? '.max_items' : '.max_items_reached')\n | translate: { '0': max }\n }}\n </ion-text>\n </div>\n }\n\n <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n @if (updatingItem) {\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n color=\"danger\"\n (click)=\"handleCancelUpdateItem()\"\n [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n >\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.update_item' | translate\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"refresh-outline\"\n slot=\"start\"\n ></ion-icon>\n {{ locale + '.update_item' | translate }}\n </ion-button>\n </div>\n } @else {\n @if (items.length < max || !max) {\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n class=\"dcf-button-add\"\n [color]=\"isDarkMode ? 'light' : 'dark'\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.create_item' | translate\"\n >\n <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n <ngx-decaf-icon\n slot=\"icon-only\"\n name=\"ti-code-plus\"\n slot=\"start\"\n />\n {{\n locale +\n (required\n ? items.length\n ? '.add'\n : '.add_first'\n : items.length\n ? '.add'\n : isOpen\n ? '.add_first'\n : '.show_form') | translate\n }}\n </ion-button>\n </div>\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n} @else {\n @if (refreshing) {\n <div class=\"dcf-loading-container\">\n <ion-spinner\n name=\"crescent\"\n color=\"primary\"\n ></ion-spinner>\n </div>\n } @else {\n <legend>{{ (title ? title : name) | translate }}</legend>\n @if (!items.length) {\n <div class=\"dcf-padding-xsmall\">\n <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n </div>\n } @else {\n @for (item of items; track trackItemFn($index, item)) {\n <div class=\"dcf-fieldset-read-item\">\n <div>\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"operation\"\n [operation]=\"operation\"\n [pk]=\"pk\"\n [model]=\"model\"\n [modelId]=\"modelId\"\n [flexMode]=\"item?.props?.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'collapse'\"\n [children]=\"item || []\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"item?.props?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n />\n </div>\n </div>\n }\n }\n }\n}\n", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-6)}\n"] }]
|
|
9719
9718
|
}], ctorParameters: () => [], propDecorators: { formControl: [{
|
|
9720
9719
|
type: Input
|
|
9721
9720
|
}], customTypes: [{
|
|
@@ -13221,7 +13220,7 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxFormDirective {
|
|
|
13221
13220
|
this.getActivePage(this.activeIndex);
|
|
13222
13221
|
}
|
|
13223
13222
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SteppedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { children: "children", paginated: "paginated", pages: "pages", pageTitles: "pageTitles", operation: "operation", startPage: "startPage" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<form\n class=\"dcf-steped-form\"\n [class.paginated]=\"paginated\"\n novalidate\n #component\n>\n @if (paginated) {\n <div class=\"dcf-page-steps\">\n <div class=\"dcf-grid dcf-grid-collapse skip\">\n @for (page of pageTitles; track $index) {\n <div class=\"dcf-flex dcf-flex-middle\">\n <div\n class=\"dcf-step\"\n [class.dcf-active]=\"activeIndex === $index + 1\"\n [class.dcf-passed]=\"$index + 1 < activeIndex\"\n >\n {{ $index + 1 }}\n </div>\n @if (page?.title || page?.description) {\n <div class=\"dcf-information dcf-visible@s\">\n @if (page?.title) {\n <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n }\n @if (page?.description) {\n <div class=\"dcf-description\">\n {{ page?.description | translate }}\n </div>\n }\n <div class=\"dcf-separator\"></div>\n </div>\n }\n @if ($index < pageTitles.length - 1) {\n <div class=\"dcf-arrow-container\">\n <svg\n width=\"8\"\n height=\"12\"\n viewBox=\"0 0 8 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M1.5 1L6.5 6L1.5 11\" />\n </svg>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (\n pageTitles[activeIndex - 1]?.title ||\n pageTitles[activeIndex - 1]?.description\n ) {\n <div class=\"dcf-current-step\">\n <div>\n @if (pageTitles[activeIndex - 1]?.title) {\n <div class=\"dcf-title\">\n {{ pageTitles[activeIndex - 1]?.title | translate }}\n </div>\n }\n @if (pageTitles[activeIndex - 1]?.description) {\n <div class=\"dcf-description\">\n {{ pageTitles[activeIndex - 1]?.description | translate }}\n </div>\n }\n </div>\n </div>\n }\n\n @if (initialized && activePage?.length) {\n <ngx-decaf-layout\n [className]=\"'dcf-stepped-form-grid paginated dcf-grid-nested'\"\n [children]=\"activePage || []\"\n [parentForm]=\"formGroup || parentForm\"\n [gap]=\"'small'\"\n [flexMode]=\"props.flexMode || false\"\n [match]=\"false\"\n [cardBody]=\"cardBody\"\n [operation]=\"operation\"\n [cardType]=\"cardType\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [match]=\"false\"\n />\n } @else {\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n <ion-text class=\"date\" style=\"width: 20%\"\n ><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text\n ></ion-text>\n <br />\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n <ion-text class=\"date\" style=\"width: 20%\"\n ><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text\n ></ion-text>\n }\n <div\n class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\"\n >\n <div class=\"dcf-width-1-2@s\">\n <ion-button color=\"light\" (click)=\"handleBack()\" [disabled]=\"activeIndex <= 1\">{{ locale + \".previous\" | translate }}</ion-button>\n </div>\n\n <div class=\"dcf-width-1-2@s\">\n <ion-button fill=\"solid\" (click)=\"handleNext(activeIndex === pages ? true : false)\">\n @if (activeIndex === pages) {\n {{ locale + \".submit\" | translate }}\n } @else {\n {{ locale + \".next\" | translate }}\n }\n </ion-button>\n </div>\n </div>\n } @else {\n <div class=\"dcf-single-step\">\n @for (item of children; track $index) {\n <ngx-decaf-card\n [className]=\"className\"\n [body]=\"cardBody\"\n [type]=\"cardType\"\n >\n <div>\n @if (item.title || item.description) {\n <div class=\"dcf-information\">\n <div>\n @if (item.title) {\n <div class=\"dcf-title\">{{ item.title | translate }}</div>\n }\n @if (item.description) {\n <div class=\"dcf-description\">\n {{ item.description | translate }}\n </div>\n }\n </div>\n </div>\n }\n <div [class.dcf-margin-bottom]=\"cardType === 'blank'\">\n @if (initialized && item.items?.length) {\n <ngx-decaf-layout\n [className]=\"'dcf-stepped-form-grid dcf-grid-nested'\"\n [children]=\"item.items || []\"\n [parentForm]=\"formGroup || parentForm\"\n [flexMode]=\"props.flexMode || false\"\n [gap]=\"'small'\"\n [cardBody]=\"cardBody\"\n [cardType]=\"cardType\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [match]=\"false\"\n />\n }\n </div>\n </div>\n </ngx-decaf-card>\n }\n <div\n class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n >\n <div class=\"dcf-width-auto@s dcf-width-1-1\">\n <ion-button color=\"light\" (click)=\"handleBack()\">\n {{ locale + \".cancel\" | translate }}\n </ion-button>\n </div>\n\n <div class=\"dcf-width-auto@s dcf-width-1-1\">\n <ion-button fill=\"solid\" (click)=\"handleNext(true)\">\n {{ locale + \".submit\" | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,.dcf-steped-form ::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,.dcf-steped-form ::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
13223
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { children: "children", paginated: "paginated", pages: "pages", pageTitles: "pageTitles", operation: "operation", startPage: "startPage" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<form\n class=\"dcf-steped-form\"\n [class.paginated]=\"paginated\"\n novalidate\n #component\n>\n @if (paginated) {\n <div class=\"dcf-page-steps\">\n <div class=\"dcf-grid dcf-grid-collapse skip\">\n @for (page of pageTitles; track $index) {\n <div class=\"dcf-flex dcf-flex-middle\">\n <div\n class=\"dcf-step\"\n [class.dcf-active]=\"activeIndex === $index + 1\"\n [class.dcf-passed]=\"$index + 1 < activeIndex\"\n >\n {{ $index + 1 }}\n </div>\n @if (page?.title || page?.description) {\n <div class=\"dcf-information dcf-visible@s\">\n @if (page?.title) {\n <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n }\n @if (page?.description) {\n <div class=\"dcf-description\">\n {{ page?.description | translate }}\n </div>\n }\n <div class=\"dcf-separator\"></div>\n </div>\n }\n @if ($index < pageTitles.length - 1) {\n <div class=\"dcf-arrow-container\">\n <svg\n width=\"8\"\n height=\"12\"\n viewBox=\"0 0 8 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M1.5 1L6.5 6L1.5 11\" />\n </svg>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (\n pageTitles[activeIndex - 1]?.title ||\n pageTitles[activeIndex - 1]?.description\n ) {\n <div class=\"dcf-current-step\">\n <div>\n @if (pageTitles[activeIndex - 1]?.title) {\n <div class=\"dcf-title\">\n {{ pageTitles[activeIndex - 1]?.title | translate }}\n </div>\n }\n @if (pageTitles[activeIndex - 1]?.description) {\n <div class=\"dcf-description\">\n {{ pageTitles[activeIndex - 1]?.description | translate }}\n </div>\n }\n </div>\n </div>\n }\n\n @if (initialized && activePage?.length) {\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"'dcf-stepped-form-grid paginated dcf-grid-nested'\"\n [children]=\"activePage || []\"\n [parentForm]=\"formGroup || parentForm\"\n [gap]=\"'small'\"\n [flexMode]=\"props.flexMode || false\"\n [match]=\"false\"\n [cardBody]=\"cardBody\"\n [operation]=\"operation\"\n [cardType]=\"cardType\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [match]=\"false\"\n />\n } @else {\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n <ion-text\n class=\"date\"\n style=\"width: 20%\"\n >\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n </ion-text>\n <br />\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n <ion-text\n class=\"date\"\n style=\"width: 20%\"\n >\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n </ion-text>\n }\n <div\n class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\"\n >\n <div class=\"dcf-width-1-2@s\">\n <ion-button\n color=\"light\"\n (click)=\"handleBack()\"\n [disabled]=\"activeIndex <= 1\"\n >\n {{ locale + '.previous' | translate }}\n </ion-button>\n </div>\n\n <div class=\"dcf-width-1-2@s\">\n <ion-button\n fill=\"solid\"\n (click)=\"handleNext(activeIndex === pages ? true : false)\"\n >\n @if (activeIndex === pages) {\n {{ locale + '.submit' | translate }}\n } @else {\n {{ locale + '.next' | translate }}\n }\n </ion-button>\n </div>\n </div>\n } @else {\n <div class=\"dcf-single-step\">\n @for (item of children; track $index) {\n <ngx-decaf-card\n [className]=\"className\"\n [body]=\"cardBody\"\n [type]=\"cardType\"\n >\n <div>\n @if (item.title || item.description) {\n <div class=\"dcf-information\">\n <div>\n @if (item.title) {\n <div class=\"dcf-title\">{{ item.title | translate }}</div>\n }\n @if (item.description) {\n <div class=\"dcf-description\">\n {{ item.description | translate }}\n </div>\n }\n </div>\n </div>\n }\n <div [class.dcf-margin-bottom]=\"cardType === 'blank'\">\n @if (initialized && item.items?.length) {\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"'dcf-stepped-form-grid dcf-grid-nested'\"\n [children]=\"item.items || []\"\n [parentForm]=\"formGroup || parentForm\"\n [flexMode]=\"props.flexMode || false\"\n [gap]=\"'small'\"\n [cardBody]=\"cardBody\"\n [cardType]=\"cardType\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [match]=\"false\"\n />\n }\n </div>\n </div>\n </ngx-decaf-card>\n }\n <div\n class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n >\n <div class=\"dcf-width-auto@s dcf-width-1-1\">\n <ion-button\n color=\"light\"\n (click)=\"handleBack()\"\n >\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n\n <div class=\"dcf-width-auto@s dcf-width-1-1\">\n <ion-button\n fill=\"solid\"\n (click)=\"handleNext(true)\"\n >\n {{ locale + '.submit' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,.dcf-steped-form ::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,.dcf-steped-form ::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
13225
13224
|
};
|
|
13226
13225
|
SteppedFormComponent = __decorate([
|
|
13227
13226
|
Dynamic(),
|
|
@@ -13236,7 +13235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
13236
13235
|
IonText,
|
|
13237
13236
|
IonButton,
|
|
13238
13237
|
LayoutComponent,
|
|
13239
|
-
], standalone: true, host: { '[attr.id]': 'uid' }, template: "<form\n class=\"dcf-steped-form\"\n [class.paginated]=\"paginated\"\n novalidate\n #component\n>\n @if (paginated) {\n <div class=\"dcf-page-steps\">\n <div class=\"dcf-grid dcf-grid-collapse skip\">\n @for (page of pageTitles; track $index) {\n <div class=\"dcf-flex dcf-flex-middle\">\n <div\n class=\"dcf-step\"\n [class.dcf-active]=\"activeIndex === $index + 1\"\n [class.dcf-passed]=\"$index + 1 < activeIndex\"\n >\n {{ $index + 1 }}\n </div>\n @if (page?.title || page?.description) {\n <div class=\"dcf-information dcf-visible@s\">\n @if (page?.title) {\n <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n }\n @if (page?.description) {\n <div class=\"dcf-description\">\n {{ page?.description | translate }}\n </div>\n }\n <div class=\"dcf-separator\"></div>\n </div>\n }\n @if ($index < pageTitles.length - 1) {\n <div class=\"dcf-arrow-container\">\n <svg\n width=\"8\"\n height=\"12\"\n viewBox=\"0 0 8 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M1.5 1L6.5 6L1.5 11\" />\n </svg>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (\n pageTitles[activeIndex - 1]?.title ||\n pageTitles[activeIndex - 1]?.description\n ) {\n <div class=\"dcf-current-step\">\n <div>\n @if (pageTitles[activeIndex - 1]?.title) {\n <div class=\"dcf-title\">\n {{ pageTitles[activeIndex - 1]?.title | translate }}\n </div>\n }\n @if (pageTitles[activeIndex - 1]?.description) {\n <div class=\"dcf-description\">\n {{ pageTitles[activeIndex - 1]?.description | translate }}\n </div>\n }\n </div>\n </div>\n }\n\n @if (initialized && activePage?.length) {\n <ngx-decaf-layout\n [className]=\"'dcf-stepped-form-grid paginated dcf-grid-nested'\"\n [children]=\"activePage || []\"\n [parentForm]=\"formGroup || parentForm\"\n [gap]=\"'small'\"\n [flexMode]=\"props.flexMode || false\"\n [match]=\"false\"\n [cardBody]=\"cardBody\"\n [operation]=\"operation\"\n [cardType]=\"cardType\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [match]=\"false\"\n />\n } @else {\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n <ion-text
|
|
13238
|
+
], standalone: true, host: { '[attr.id]': 'uid' }, template: "<form\n class=\"dcf-steped-form\"\n [class.paginated]=\"paginated\"\n novalidate\n #component\n>\n @if (paginated) {\n <div class=\"dcf-page-steps\">\n <div class=\"dcf-grid dcf-grid-collapse skip\">\n @for (page of pageTitles; track $index) {\n <div class=\"dcf-flex dcf-flex-middle\">\n <div\n class=\"dcf-step\"\n [class.dcf-active]=\"activeIndex === $index + 1\"\n [class.dcf-passed]=\"$index + 1 < activeIndex\"\n >\n {{ $index + 1 }}\n </div>\n @if (page?.title || page?.description) {\n <div class=\"dcf-information dcf-visible@s\">\n @if (page?.title) {\n <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n }\n @if (page?.description) {\n <div class=\"dcf-description\">\n {{ page?.description | translate }}\n </div>\n }\n <div class=\"dcf-separator\"></div>\n </div>\n }\n @if ($index < pageTitles.length - 1) {\n <div class=\"dcf-arrow-container\">\n <svg\n width=\"8\"\n height=\"12\"\n viewBox=\"0 0 8 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M1.5 1L6.5 6L1.5 11\" />\n </svg>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (\n pageTitles[activeIndex - 1]?.title ||\n pageTitles[activeIndex - 1]?.description\n ) {\n <div class=\"dcf-current-step\">\n <div>\n @if (pageTitles[activeIndex - 1]?.title) {\n <div class=\"dcf-title\">\n {{ pageTitles[activeIndex - 1]?.title | translate }}\n </div>\n }\n @if (pageTitles[activeIndex - 1]?.description) {\n <div class=\"dcf-description\">\n {{ pageTitles[activeIndex - 1]?.description | translate }}\n </div>\n }\n </div>\n </div>\n }\n\n @if (initialized && activePage?.length) {\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"'dcf-stepped-form-grid paginated dcf-grid-nested'\"\n [children]=\"activePage || []\"\n [parentForm]=\"formGroup || parentForm\"\n [gap]=\"'small'\"\n [flexMode]=\"props.flexMode || false\"\n [match]=\"false\"\n [cardBody]=\"cardBody\"\n [operation]=\"operation\"\n [cardType]=\"cardType\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [match]=\"false\"\n />\n } @else {\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n <ion-text\n class=\"date\"\n style=\"width: 20%\"\n >\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n </ion-text>\n <br />\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n <ion-text\n class=\"date\"\n style=\"width: 20%\"\n >\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n </ion-text>\n }\n <div\n class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\"\n >\n <div class=\"dcf-width-1-2@s\">\n <ion-button\n color=\"light\"\n (click)=\"handleBack()\"\n [disabled]=\"activeIndex <= 1\"\n >\n {{ locale + '.previous' | translate }}\n </ion-button>\n </div>\n\n <div class=\"dcf-width-1-2@s\">\n <ion-button\n fill=\"solid\"\n (click)=\"handleNext(activeIndex === pages ? true : false)\"\n >\n @if (activeIndex === pages) {\n {{ locale + '.submit' | translate }}\n } @else {\n {{ locale + '.next' | translate }}\n }\n </ion-button>\n </div>\n </div>\n } @else {\n <div class=\"dcf-single-step\">\n @for (item of children; track $index) {\n <ngx-decaf-card\n [className]=\"className\"\n [body]=\"cardBody\"\n [type]=\"cardType\"\n >\n <div>\n @if (item.title || item.description) {\n <div class=\"dcf-information\">\n <div>\n @if (item.title) {\n <div class=\"dcf-title\">{{ item.title | translate }}</div>\n }\n @if (item.description) {\n <div class=\"dcf-description\">\n {{ item.description | translate }}\n </div>\n }\n </div>\n </div>\n }\n <div [class.dcf-margin-bottom]=\"cardType === 'blank'\">\n @if (initialized && item.items?.length) {\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"'dcf-stepped-form-grid dcf-grid-nested'\"\n [children]=\"item.items || []\"\n [parentForm]=\"formGroup || parentForm\"\n [flexMode]=\"props.flexMode || false\"\n [gap]=\"'small'\"\n [cardBody]=\"cardBody\"\n [cardType]=\"cardType\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [match]=\"false\"\n />\n }\n </div>\n </div>\n </ngx-decaf-card>\n }\n <div\n class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n >\n <div class=\"dcf-width-auto@s dcf-width-1-1\">\n <ion-button\n color=\"light\"\n (click)=\"handleBack()\"\n >\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n\n <div class=\"dcf-width-auto@s dcf-width-1-1\">\n <ion-button\n fill=\"solid\"\n (click)=\"handleNext(true)\"\n >\n {{ locale + '.submit' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,.dcf-steped-form ::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,.dcf-steped-form ::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\n"] }]
|
|
13240
13239
|
}], ctorParameters: () => [], propDecorators: { children: [{
|
|
13241
13240
|
type: Input
|
|
13242
13241
|
}], paginated: [{
|
|
@@ -13533,6 +13532,10 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
|
|
|
13533
13532
|
handleClear() {
|
|
13534
13533
|
this.clearErrors();
|
|
13535
13534
|
this.previewFile = undefined;
|
|
13535
|
+
if (this.formControl instanceof FormControl) {
|
|
13536
|
+
this.formControl.setValue(null);
|
|
13537
|
+
console.log(this.formControl.value);
|
|
13538
|
+
}
|
|
13536
13539
|
this.files = [];
|
|
13537
13540
|
}
|
|
13538
13541
|
/**
|