@decaf-ts/for-angular 0.0.34 → 0.0.36

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

@@ -22,7 +22,6 @@ import { IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, Ion
 import { addIcons } from 'ionicons';
 import * as allIcons from 'ionicons/icons';
 import { chevronUpOutline, chevronDownOutline, createOutline, alertCircleOutline, chevronForwardOutline, chevronBackOutline, arrowBackOutline, arrowForwardOutline } from 'ionicons/icons';
-import { NgxParentComponentDirective as NgxParentComponentDirective$1 } from 'src/lib/engine/NgxParentComponentDirective';
 
 /**
  * @description Angular engine key constants
@@ -2747,12 +2746,13 @@ class NgxDecafComponentDirective extends LoggedClass {
             this.locale = this.localeContext;
     }
     translate(phrase, params) {
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
             if (typeof params === Primitives.STRING)
                 params = { "0": params };
-            return firstValueFrom(this.translateService.get(phrase, (params || {})));
+            return resolve(firstValueFrom(this.translateService.get(phrase, (params || {}))));
         });
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     async initialize(...args) {
         this.initialized = true;
     }
@@ -4279,6 +4279,7 @@ class NgxFormDirective extends NgxParentComponentDirective {
     * @returns {Promise<void>}
     * @memberOf CrudFormComponent
     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     async ngOnInit(model) {
         // dont call super.ngOnInit to model conflicts
         if (this.operation === OperationKeys.READ || this.operation === OperationKeys.DELETE)
@@ -8784,7 +8785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
-let SteppedFormComponent = class SteppedFormComponent extends NgxParentComponentDirective$1 {
+let SteppedFormComponent = class SteppedFormComponent extends NgxParentComponentDirective {
     /**
      * @description Creates an instance of SteppedFormComponent.
      * @summary Initializes a new SteppedFormComponent instance and registers the required
@@ -9085,7 +9086,9 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxParentComponent
         this.timerSubscription = timer(10).subscribe(() => this.activeChildren = this.children.filter(c => c.props?.['page'] === page));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SteppedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { children: "children", paginated: "paginated", pages: "pages", pageTitles: "pageTitles", operation: "operation", startPage: "startPage", formGroup: "formGroup" }, outputs: { submitEvent: "submitEvent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<form class=\"dcf-steped-form\" [class.paginated]=\"paginated\"  novalidate>\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 class=\"dcf-step\" [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</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\">{{ page?.description | translate }}</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 width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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(pageTitles[activePage - 1]?.title || pageTitles[activePage - 1]?.description) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if(pageTitles[activePage - 1]?.title) {\n            <div class=\"dcf-title\">{{  pageTitles[activePage - 1]?.title  | translate }}</div>\n          }\n          @if(pageTitles[activePage - 1]?.description) {\n            <div class=\"dcf-description\">{{ pageTitles[activePage - 1]?.description | translate }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if(formGroup) {\n         <!-- <ngx-decaf-layout\n          [children]=\"children || []\"\n          [parentComponent]=\"formGroup || parentComponent\"\n          gap=\"small\"\n          [initializeProps]=\"false\"\n          [rows]=\"rows ?? 1\"\n          [cols]=\"cols ?? 1\" /> -->\n      @for(child of activeChildren;  track $index) {\n        <div class=\"dcf-step-form-container\">\n           <ngx-decaf-component-renderer\n            [tag]=\"child?.tag\"\n            (listenEvent)=\"handleEvent($event)\"\n            [children]=\"child?.children || []\"\n            [globals]=\"{props: child.props}\"\n          />\n        </div>\n\n\n      }\n    } @else {\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n      <br />\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    }\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button  color=\"light\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n          <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon> -->\n            {{locale + '.previous' | translate}}\n        </ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n          @if(activePage === pages) {\n            {{locale + '.submit' | translate}}\n          } @else {\n            {{locale + '.next' | translate}}\n            <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon> -->\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ion-card>\n          <ion-card-content>\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\">{{ item.description | translate }}</div>\n                    }\n                  </div>\n                </div>\n              }\n              <div class=\"dcf-grid dcf-grid-small  dcf-child-width-1-1\">\n                @for (child of item.items; track $index) {\n                  <ngx-decaf-component-renderer\n                    [class]=\"'dcf-step-container ' + (child?.props?.className ? child.props.className + ' ' : ' ') + child.tag\"\n                    [tag]=\"child?.tag\"\n                    [projectable]=\"false\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [children]=\"child?.children || []\"\n                    [globals]=\"{props: child.props}\"\n                  />\n                }\n              </div>\n          </ion-card-content>\n        </ion-card>\n      }\n      <div class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\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;color:var(--dcf-color-gray-7)}.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}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,::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: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { children: "children", paginated: "paginated", pages: "pages", pageTitles: "pageTitles", operation: "operation", startPage: "startPage", formGroup: "formGroup" }, outputs: { submitEvent: "submitEvent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<form class=\"dcf-steped-form\" [class.paginated]=\"paginated\"  novalidate>\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 class=\"dcf-step\" [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</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\">{{ page?.description | translate }}</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 width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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(pageTitles[activePage - 1]?.title || pageTitles[activePage - 1]?.description) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if(pageTitles[activePage - 1]?.title) {\n            <div class=\"dcf-title\">{{  pageTitles[activePage - 1]?.title  | translate }}</div>\n          }\n          @if(pageTitles[activePage - 1]?.description) {\n            <div class=\"dcf-description\">{{ pageTitles[activePage - 1]?.description | translate }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if(formGroup) {\n         <!-- <ngx-decaf-layout\n          [children]=\"children || []\"\n          [parentComponent]=\"formGroup || parentComponent\"\n          gap=\"small\"\n          [initializeProps]=\"false\"\n          [rows]=\"rows ?? 1\"\n          [cols]=\"cols ?? 1\" /> -->\n      @for(child of activeChildren;  track $index) {\n        <div class=\"dcf-step-form-container\">\n           <ngx-decaf-component-renderer\n            [tag]=\"child?.tag\"\n            (listenEvent)=\"handleEvent($event)\"\n            [children]=\"child?.children || []\"\n            [globals]=\"{props: child.props}\"\n          />\n        </div>\n\n\n      }\n    } @else {\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n      <br />\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    }\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button  color=\"light\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n          <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon> -->\n            {{locale + '.previous' | translate}}\n        </ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n          @if(activePage === pages) {\n            {{locale + '.submit' | translate}}\n          } @else {\n            {{locale + '.next' | translate}}\n            <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon> -->\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ion-card>\n          <ion-card-content>\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\">{{ item.description | translate }}</div>\n                    }\n                  </div>\n                </div>\n              }\n              <div class=\"dcf-grid dcf-grid-small  dcf-child-width-1-1\">\n                @for (child of item.items; track $index) {\n                  <ngx-decaf-component-renderer\n                    [class]=\"'dcf-step-container ' + (child?.props?.className ? child.props.className + ' ' : ' ') + child.tag\"\n                    [tag]=\"child?.tag\"\n                    [projectable]=\"false\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [children]=\"child?.children || []\"\n                    [globals]=\"{props: child.props}\"\n                  />\n                }\n              </div>\n          </ion-card-content>\n        </ion-card>\n      }\n      <div class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\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;color:var(--dcf-color-gray-7)}.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}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,::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,
+                ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 SteppedFormComponent = __decorate([
     Dynamic(),
@@ -9099,7 +9102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         IonSkeletonText,
                         IonText,
                         IonButton,
-                        LayoutComponent,
+                        // LayoutComponent,
                         ComponentRendererComponent
                     ], standalone: true, host: { '[attr.id]': 'uid' }, template: "<form class=\"dcf-steped-form\" [class.paginated]=\"paginated\"  novalidate>\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 class=\"dcf-step\" [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</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\">{{ page?.description | translate }}</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 width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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(pageTitles[activePage - 1]?.title || pageTitles[activePage - 1]?.description) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if(pageTitles[activePage - 1]?.title) {\n            <div class=\"dcf-title\">{{  pageTitles[activePage - 1]?.title  | translate }}</div>\n          }\n          @if(pageTitles[activePage - 1]?.description) {\n            <div class=\"dcf-description\">{{ pageTitles[activePage - 1]?.description | translate }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if(formGroup) {\n         <!-- <ngx-decaf-layout\n          [children]=\"children || []\"\n          [parentComponent]=\"formGroup || parentComponent\"\n          gap=\"small\"\n          [initializeProps]=\"false\"\n          [rows]=\"rows ?? 1\"\n          [cols]=\"cols ?? 1\" /> -->\n      @for(child of activeChildren;  track $index) {\n        <div class=\"dcf-step-form-container\">\n           <ngx-decaf-component-renderer\n            [tag]=\"child?.tag\"\n            (listenEvent)=\"handleEvent($event)\"\n            [children]=\"child?.children || []\"\n            [globals]=\"{props: child.props}\"\n          />\n        </div>\n\n\n      }\n    } @else {\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n      <br />\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    }\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button  color=\"light\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n          <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon> -->\n            {{locale + '.previous' | translate}}\n        </ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n          @if(activePage === pages) {\n            {{locale + '.submit' | translate}}\n          } @else {\n            {{locale + '.next' | translate}}\n            <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon> -->\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ion-card>\n          <ion-card-content>\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\">{{ item.description | translate }}</div>\n                    }\n                  </div>\n                </div>\n              }\n              <div class=\"dcf-grid dcf-grid-small  dcf-child-width-1-1\">\n                @for (child of item.items; track $index) {\n                  <ngx-decaf-component-renderer\n                    [class]=\"'dcf-step-container ' + (child?.props?.className ? child.props.className + ' ' : ' ') + child.tag\"\n                    [tag]=\"child?.tag\"\n                    [projectable]=\"false\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [children]=\"child?.children || []\"\n                    [globals]=\"{props: child.props}\"\n                  />\n                }\n              </div>\n          </ion-card-content>\n        </ion-card>\n      }\n      <div class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\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;color:var(--dcf-color-gray-7)}.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}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { children: [{