@decaf-ts/for-angular 0.0.24 → 0.0.25

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.
@@ -2648,6 +2648,11 @@ var component = {
2648
2648
  step3: "Type a value",
2649
2649
  no_suggestions: "No suggestions",
2650
2650
  sort: "Sort by"
2651
+ },
2652
+ stepped_form: {
2653
+ next: "Next",
2654
+ previous: "Previous",
2655
+ submit: "Submit"
2651
2656
  }
2652
2657
  };
2653
2658
  var en = {
@@ -8421,13 +8426,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
8421
8426
  args: ['window:BackButtonNavigationEndEvent', ['$event']]
8422
8427
  }] } });
8423
8428
 
8424
- let StepedFormComponent = class StepedFormComponent {
8429
+ let SteppedFormComponent = class SteppedFormComponent {
8425
8430
  /**
8426
- * @description Creates an instance of StepedFormComponent.
8427
- * @summary Initializes a new StepedFormComponent instance and registers the required
8431
+ * @description Creates an instance of SteppedFormComponent.
8432
+ * @summary Initializes a new SteppedFormComponent instance and registers the required
8428
8433
  * Ionic icons for navigation buttons (forward and back arrows).
8429
8434
  *
8430
- * @memberOf StepedFormComponent
8435
+ * @memberOf SteppedFormComponent
8431
8436
  */
8432
8437
  constructor() {
8433
8438
  /**
@@ -8438,7 +8443,7 @@ let StepedFormComponent = class StepedFormComponent {
8438
8443
  *
8439
8444
  * @type {number}
8440
8445
  * @default 1
8441
- * @memberOf StepedFormComponent
8446
+ * @memberOf SteppedFormComponent
8442
8447
  */
8443
8448
  this.pages = 1;
8444
8449
  /**
@@ -8449,7 +8454,7 @@ let StepedFormComponent = class StepedFormComponent {
8449
8454
  *
8450
8455
  * @type {CrudOperations}
8451
8456
  * @default OperationKeys.CREATE
8452
- * @memberOf StepedFormComponent
8457
+ * @memberOf SteppedFormComponent
8453
8458
  */
8454
8459
  this.operation = OperationKeys.CREATE;
8455
8460
  /**
@@ -8460,7 +8465,7 @@ let StepedFormComponent = class StepedFormComponent {
8460
8465
  *
8461
8466
  * @type {number}
8462
8467
  * @default 1
8463
- * @memberOf StepedFormComponent
8468
+ * @memberOf SteppedFormComponent
8464
8469
  */
8465
8470
  this.startPage = 1;
8466
8471
  /**
@@ -8470,7 +8475,7 @@ let StepedFormComponent = class StepedFormComponent {
8470
8475
  * updated whenever the user navigates between pages.
8471
8476
  *
8472
8477
  * @type {UIModelMetadata[] | undefined}
8473
- * @memberOf StepedFormComponent
8478
+ * @memberOf SteppedFormComponent
8474
8479
  */
8475
8480
  this.activeChildren = undefined;
8476
8481
  /**
@@ -8480,7 +8485,7 @@ let StepedFormComponent = class StepedFormComponent {
8480
8485
  * when using FormArray structure.
8481
8486
  *
8482
8487
  * @type {FormGroup | undefined}
8483
- * @memberOf StepedFormComponent
8488
+ * @memberOf SteppedFormComponent
8484
8489
  */
8485
8490
  this.activeFormGroup = undefined;
8486
8491
  /**
@@ -8490,7 +8495,7 @@ let StepedFormComponent = class StepedFormComponent {
8490
8495
  * the next/back buttons or programmatic navigation.
8491
8496
  *
8492
8497
  * @type {number}
8493
- * @memberOf StepedFormComponent
8498
+ * @memberOf SteppedFormComponent
8494
8499
  */
8495
8500
  this.activePage = 1;
8496
8501
  /**
@@ -8500,7 +8505,7 @@ let StepedFormComponent = class StepedFormComponent {
8500
8505
  * logical pages and provide navigation structure.
8501
8506
  *
8502
8507
  * @type {UIModelMetadata[]}
8503
- * @memberOf StepedFormComponent
8508
+ * @memberOf SteppedFormComponent
8504
8509
  */
8505
8510
  this.pagesArray = [];
8506
8511
  /**
@@ -8510,7 +8515,7 @@ let StepedFormComponent = class StepedFormComponent {
8510
8515
  * event type information for parent components to handle.
8511
8516
  *
8512
8517
  * @type {EventEmitter<BaseCustomEvent>}
8513
- * @memberOf StepedFormComponent
8518
+ * @memberOf SteppedFormComponent
8514
8519
  */
8515
8520
  this.submitEvent = new EventEmitter();
8516
8521
  addIcons({ arrowForwardOutline, arrowBackOutline });
@@ -8524,7 +8529,7 @@ let StepedFormComponent = class StepedFormComponent {
8524
8529
  * @mermaid
8525
8530
  * sequenceDiagram
8526
8531
  * participant A as Angular Lifecycle
8527
- * participant S as StepedFormComponent
8532
+ * participant S as SteppedFormComponent
8528
8533
  * participant F as Form Service
8529
8534
  *
8530
8535
  * A->>S: ngOnInit()
@@ -8536,9 +8541,11 @@ let StepedFormComponent = class StepedFormComponent {
8536
8541
  * S->>F: Extract FormGroup for active page
8537
8542
  * F-->>S: Return activeFormGroup
8538
8543
  *
8539
- * @memberOf StepedFormComponent
8544
+ * @memberOf SteppedFormComponent
8540
8545
  */
8541
8546
  ngOnInit() {
8547
+ if (!this.locale)
8548
+ this.locale = getLocaleContext("SteppedFormComponent");
8542
8549
  this.activePage = this.startPage;
8543
8550
  this.pagesArray = this.children.reduce((acc, curr, index) => {
8544
8551
  const page = curr.props?.['page'] || index + 1;
@@ -8563,7 +8570,7 @@ let StepedFormComponent = class StepedFormComponent {
8563
8570
  * @summary Unsubscribes from any active timer subscriptions to prevent memory leaks.
8564
8571
  * This is part of Angular's component lifecycle and ensures proper resource cleanup.
8565
8572
  *
8566
- * @memberOf StepedFormComponent
8573
+ * @memberOf SteppedFormComponent
8567
8574
  */
8568
8575
  ngOnDestroy() {
8569
8576
  if (this.timerSubscription)
@@ -8581,7 +8588,7 @@ let StepedFormComponent = class StepedFormComponent {
8581
8588
  * @mermaid
8582
8589
  * sequenceDiagram
8583
8590
  * participant U as User
8584
- * participant S as StepedFormComponent
8591
+ * participant S as SteppedFormComponent
8585
8592
  * participant F as Form Service
8586
8593
  * participant P as Parent Component
8587
8594
  *
@@ -8597,7 +8604,7 @@ let StepedFormComponent = class StepedFormComponent {
8597
8604
  * S->>P: submitEvent.emit({data, name: SUBMIT})
8598
8605
  * end
8599
8606
  *
8600
- * @memberOf StepedFormComponent
8607
+ * @memberOf SteppedFormComponent
8601
8608
  */
8602
8609
  handleNext(lastPage = false) {
8603
8610
  const isValid = NgxFormService.validateFields(this.activeFormGroup);
@@ -8628,14 +8635,14 @@ let StepedFormComponent = class StepedFormComponent {
8628
8635
  * @mermaid
8629
8636
  * sequenceDiagram
8630
8637
  * participant U as User
8631
- * participant S as StepedFormComponent
8638
+ * participant S as SteppedFormComponent
8632
8639
  *
8633
8640
  * U->>S: Click Back
8634
8641
  * S->>S: activePage--
8635
8642
  * S->>S: getCurrentFormGroup(activePage)
8636
8643
  * Note over S: Update active form and children
8637
8644
  *
8638
- * @memberOf StepedFormComponent
8645
+ * @memberOf SteppedFormComponent
8639
8646
  */
8640
8647
  handleBack() {
8641
8648
  this.activePage = this.activePage - 1;
@@ -8653,7 +8660,7 @@ let StepedFormComponent = class StepedFormComponent {
8653
8660
  * @private
8654
8661
  * @mermaid
8655
8662
  * sequenceDiagram
8656
- * participant S as StepedFormComponent
8663
+ * participant S as SteppedFormComponent
8657
8664
  * participant F as FormArray
8658
8665
  * participant T as Timer
8659
8666
  *
@@ -8664,7 +8671,7 @@ let StepedFormComponent = class StepedFormComponent {
8664
8671
  * T-->>S: Filter children for active page
8665
8672
  * S->>S: Set activeChildren
8666
8673
  *
8667
- * @memberOf StepedFormComponent
8674
+ * @memberOf SteppedFormComponent
8668
8675
  */
8669
8676
  getCurrentFormGroup(page) {
8670
8677
  this.activeFormGroup = this.formGroup.at(page - 1);
@@ -8674,17 +8681,28 @@ let StepedFormComponent = class StepedFormComponent {
8674
8681
  console.log(this.activeChildren);
8675
8682
  });
8676
8683
  }
8677
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8678
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepedFormComponent, isStandalone: true, selector: "ngx-decaf-steped-form", inputs: { pages: "pages", operation: "operation", startPage: "startPage", children: "children", formGroup: "formGroup" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: " <!-- @for(child of children; track trackItemFn($index, child)) {\n {{child.tag }}\n <ngx-decaf-component-renderer\n [tag]=\"child.tag\"\n (listenEvent)=\"handleEvent($event)\"\n [globals]='{props: child.props}'>\n </ngx-decaf-component-renderer>\n } -->\n <form class=\"dcf-steped-form\" novalidate>\n <div class=\"dcf-page-steps\">\n <div>\n @for(page of pagesArray; track $index;) {\n <div [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n }\n </div>\n </div>\n @if(formGroup) {\n @for(child of activeChildren; track $index) {\n <ngx-decaf-component-renderer\n [tag]=\"child?.tag\"\n (listenEvent)=\"handleEvent($event)\"\n [children]=\"child?.children || []\"\n [globals]=\"{props: child.props}\"\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\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 fill=\"clear\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon>\n Previous\n </ion-button>\n </div>\n\n <div class=\"dcf-width-1-2@s\">\n <ion-button [fill]=\"activePage === pages ? 'solid' : 'outline'\" (click)=\"handleNext(activePage === pages ? true : false)\">\n @if(activePage === pages) {\n Submit\n } @else {\n Next\n <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon>\n }\n </ion-button>\n </div>\n </div>\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{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;margin-bottom:2rem}.dcf-page-steps>div{justify-content:center;min-width:200px;max-width:200px;column-gap:.25em;display:flex}.dcf-page-steps>div>div{width:30px;text-align:center;border-bottom:solid var(--dcf-color-gray-3);box-sizing:border-box;border-width:3px;font-size:0px;font-weight:600}.dcf-page-steps>div>div.dcf-active{border-width:5px;font-size:1rem;color:var(--ion-color-gray-7);border-color:var(--ion-color-primary);line-height:1rem}.dcf-page-steps>div>div.dcf-passed{border-width:4px;font-size:.5rem;line-height:1.2rem;border-color:var(--dcf-color-gray-5);color:var(--ion-color-primary)}\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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }] }); }
8684
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SteppedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8685
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { locale: "locale", pages: "pages", operation: "operation", startPage: "startPage", children: "children", formGroup: "formGroup" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<form class=\"dcf-steped-form\" novalidate>\n <div class=\"dcf-page-steps\">\n <div>\n @for(page of pagesArray; track $index;) {\n <div [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n }\n </div>\n </div>\n @if(formGroup) {\n @for(child of activeChildren; track $index) {\n <ngx-decaf-component-renderer\n [tag]=\"child?.tag\"\n (listenEvent)=\"handleEvent($event)\"\n [children]=\"child?.children || []\"\n [globals]=\"{props: child.props}\"\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\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 fill=\"clear\" (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]=\"activePage === pages ? 'solid' : 'outline'\" (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</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{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;margin-bottom:2rem}.dcf-page-steps>div{justify-content:center;min-width:200px;max-width:200px;column-gap:.25em;display:flex}.dcf-page-steps>div>div{width:30px;text-align:center;border-bottom:solid var(--dcf-color-gray-3);box-sizing:border-box;border-width:3px;font-size:0px;font-weight:600}.dcf-page-steps>div>div.dcf-active{border-width:5px;font-size:1rem;color:var(--ion-color-gray-7);border-color:var(--ion-color-primary);line-height:1rem}.dcf-page-steps>div>div.dcf-passed{border-width:4px;font-size:.5rem;line-height:1.2rem;border-color:var(--dcf-color-gray-5);color:var(--ion-color-primary)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }] }); }
8679
8686
  };
8680
- StepedFormComponent = __decorate([
8687
+ SteppedFormComponent = __decorate([
8681
8688
  Dynamic(),
8682
8689
  __metadata("design:paramtypes", [])
8683
- ], StepedFormComponent);
8684
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepedFormComponent, decorators: [{
8690
+ ], SteppedFormComponent);
8691
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SteppedFormComponent, decorators: [{
8685
8692
  type: Component,
8686
- args: [{ selector: 'ngx-decaf-steped-form', imports: [ReactiveFormsModule, IonSkeletonText, IonText, IonButton, IonIcon, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: " <!-- @for(child of children; track trackItemFn($index, child)) {\n {{child.tag }}\n <ngx-decaf-component-renderer\n [tag]=\"child.tag\"\n (listenEvent)=\"handleEvent($event)\"\n [globals]='{props: child.props}'>\n </ngx-decaf-component-renderer>\n } -->\n <form class=\"dcf-steped-form\" novalidate>\n <div class=\"dcf-page-steps\">\n <div>\n @for(page of pagesArray; track $index;) {\n <div [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n }\n </div>\n </div>\n @if(formGroup) {\n @for(child of activeChildren; track $index) {\n <ngx-decaf-component-renderer\n [tag]=\"child?.tag\"\n (listenEvent)=\"handleEvent($event)\"\n [children]=\"child?.children || []\"\n [globals]=\"{props: child.props}\"\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\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 fill=\"clear\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon>\n Previous\n </ion-button>\n </div>\n\n <div class=\"dcf-width-1-2@s\">\n <ion-button [fill]=\"activePage === pages ? 'solid' : 'outline'\" (click)=\"handleNext(activePage === pages ? true : false)\">\n @if(activePage === pages) {\n Submit\n } @else {\n Next\n <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon>\n }\n </ion-button>\n </div>\n </div>\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{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;margin-bottom:2rem}.dcf-page-steps>div{justify-content:center;min-width:200px;max-width:200px;column-gap:.25em;display:flex}.dcf-page-steps>div>div{width:30px;text-align:center;border-bottom:solid var(--dcf-color-gray-3);box-sizing:border-box;border-width:3px;font-size:0px;font-weight:600}.dcf-page-steps>div>div.dcf-active{border-width:5px;font-size:1rem;color:var(--ion-color-gray-7);border-color:var(--ion-color-primary);line-height:1rem}.dcf-page-steps>div>div.dcf-passed{border-width:4px;font-size:.5rem;line-height:1.2rem;border-color:var(--dcf-color-gray-5);color:var(--ion-color-primary)}\n"] }]
8687
- }], ctorParameters: () => [], propDecorators: { pages: [{
8693
+ args: [{ selector: 'ngx-decaf-stepped-form', imports: [
8694
+ TranslatePipe,
8695
+ ReactiveFormsModule,
8696
+ IonSkeletonText,
8697
+ IonText,
8698
+ IonButton,
8699
+ IonIcon,
8700
+ ModelRendererComponent,
8701
+ ComponentRendererComponent
8702
+ ], standalone: true, template: "<form class=\"dcf-steped-form\" novalidate>\n <div class=\"dcf-page-steps\">\n <div>\n @for(page of pagesArray; track $index;) {\n <div [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n }\n </div>\n </div>\n @if(formGroup) {\n @for(child of activeChildren; track $index) {\n <ngx-decaf-component-renderer\n [tag]=\"child?.tag\"\n (listenEvent)=\"handleEvent($event)\"\n [children]=\"child?.children || []\"\n [globals]=\"{props: child.props}\"\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\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 fill=\"clear\" (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]=\"activePage === pages ? 'solid' : 'outline'\" (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</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{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;margin-bottom:2rem}.dcf-page-steps>div{justify-content:center;min-width:200px;max-width:200px;column-gap:.25em;display:flex}.dcf-page-steps>div>div{width:30px;text-align:center;border-bottom:solid var(--dcf-color-gray-3);box-sizing:border-box;border-width:3px;font-size:0px;font-weight:600}.dcf-page-steps>div>div.dcf-active{border-width:5px;font-size:1rem;color:var(--ion-color-gray-7);border-color:var(--ion-color-primary);line-height:1rem}.dcf-page-steps>div>div.dcf-passed{border-width:4px;font-size:.5rem;line-height:1.2rem;border-color:var(--dcf-color-gray-5);color:var(--ion-color-primary)}\n"] }]
8703
+ }], ctorParameters: () => [], propDecorators: { locale: [{
8704
+ type: Input
8705
+ }], pages: [{
8688
8706
  type: Input
8689
8707
  }], operation: [{
8690
8708
  type: Input
@@ -8740,7 +8758,7 @@ const Components = [
8740
8758
  FieldsetComponent,
8741
8759
  LayoutComponent,
8742
8760
  FilterComponent,
8743
- StepedFormComponent
8761
+ SteppedFormComponent
8744
8762
  ];
8745
8763
  class ForAngularComponentsModule {
8746
8764
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ForAngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -8757,7 +8775,7 @@ class ForAngularComponentsModule {
8757
8775
  FieldsetComponent,
8758
8776
  LayoutComponent,
8759
8777
  FilterComponent,
8760
- StepedFormComponent, CollapsableDirective], exports: [ModelRendererComponent,
8778
+ SteppedFormComponent, CollapsableDirective], exports: [ModelRendererComponent,
8761
8779
  ComponentRendererComponent,
8762
8780
  CrudFieldComponent,
8763
8781
  CrudFormComponent,
@@ -8770,7 +8788,7 @@ class ForAngularComponentsModule {
8770
8788
  FieldsetComponent,
8771
8789
  LayoutComponent,
8772
8790
  FilterComponent,
8773
- StepedFormComponent, CollapsableDirective] }); }
8791
+ SteppedFormComponent, CollapsableDirective] }); }
8774
8792
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ForAngularComponentsModule, imports: [CrudFieldComponent,
8775
8793
  CrudFormComponent,
8776
8794
  EmptyStateComponent,
@@ -8781,14 +8799,14 @@ class ForAngularComponentsModule {
8781
8799
  CrudFormComponent,
8782
8800
  FieldsetComponent,
8783
8801
  FilterComponent,
8784
- StepedFormComponent] }); }
8802
+ SteppedFormComponent] }); }
8785
8803
  }
8786
8804
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ForAngularComponentsModule, decorators: [{
8787
8805
  type: NgModule,
8788
8806
  args: [{
8789
8807
  imports: [...Components, ...Directives],
8790
8808
  declarations: [],
8791
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
8809
+ schemas: [],
8792
8810
  exports: [...Components, ...Directives],
8793
8811
  }]
8794
8812
  }] });
@@ -8807,5 +8825,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
8807
8825
  * Generated bundle index. Do not edit.
8808
8826
  */
8809
8827
 
8810
- export { AngularEngineKeys, BaseComponentProps, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, MultiI18nLoader, NgxBaseComponent, NgxCrudFormField, NgxFormService, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, StepedFormComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getI18nLoaderFactoryProviderConfig, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
8828
+ export { AngularEngineKeys, BaseComponentProps, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, MultiI18nLoader, NgxBaseComponent, NgxCrudFormField, NgxFormService, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getI18nLoaderFactoryProviderConfig, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
8811
8829
  //# sourceMappingURL=decaf-ts-for-angular.mjs.map