@qbs-origin/origin-form 0.5.0 → 0.6.1

package/README.md

@@ -1,24 +1,107 @@
-# OriginForm
+# @qbs-origin/origin-form
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.
+Angular library for dynamic form generation with formly integration.
 
-## Code scaffolding
+## Installation
 
-Run `ng generate component component-name --project origin-form` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project origin-form`.
-> Note: Don't forget to add `--project origin-form` or else it will be added to the default project in your `angular.json` file. 
+```bash
+npm install @qbs-origin/origin-form
+```
 
-## Build
+## Peer Dependencies
 
-Run `ng build origin-form` to build the project. The build artifacts will be stored in the `dist/` directory.
+This library requires the following peer dependencies:
 
-## Publishing
+```bash
+npm install @angular/cdk @angular/material @ngx-formly/core @ngx-formly/material @ngx-translate/core @ngx-translate/http-loader @microsoft/signalr file-saver lodash ng2-pdf-viewer ngx-markdown ngx-scrollbar @qbs-origin/sign-lib ts-md5 uuid
+```
 
-After building your library with `ng build origin-form`, go to the dist folder `cd dist/origin-form` and run `npm publish`.
+## Usage
 
-## Running unit tests
+Import the `OriginFormModule` in your Angular module:
 
-Run `ng test origin-form` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```typescript
+import { OriginFormModule } from '@qbs-origin/origin-form';
 
-## Further help
+@NgModule({
+  imports: [
+    OriginFormModule
+  ]
+})
+export class AppModule { }
+```
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+## Component Usage
+
+Use the `OriginFormComponent` in your template:
+
+```html
+<app-origin-form
+  [configComponent]="config"
+  [configUuid]="uuid"
+  [currentLanguageIso]="'en'"
+  [showLanguageSelector]="true"
+  (event)="onFormEvent($event)">
+</app-origin-form>
+```
+
+## Configuration
+
+### InputConfig Interface
+
+The `configComponent` input accepts an `InputConfig` object:
+
+```typescript
+import { InputConfig } from '@qbs-origin/origin-form';
+
+const config: InputConfig = {
+  Token: 'your-auth-token',
+  RefreshToken: 'your-refresh-token',
+  BaseUrlGateway: 'https://api.example.com/gateway',
+  BaseUrlAuthenticator: 'https://api.example.com/auth',
+  BaseUrlInfrastructure: 'https://api.example.com/infrastructure',
+  BaseUrlPublicInfrastructure: 'https://api.example.com/public',
+  BaseUrlDocuments: 'https://api.example.com/documents',
+  BaseUrlBusiness: 'https://api.example.com/business',
+  BaseUrlSmartAccounts: 'https://api.example.com/smart-accounts',
+  ClientId: 'your-client-id'
+};
+```
+
+### Component Inputs
+
+| Input | Type | Description |
+|-------|------|-------------|
+| `configComponent` | `InputConfig` | Configuration object with API URLs and authentication |
+| `configUuid` | `string` | Unique identifier for the form configuration |
+| `currentStepId` | `string` | Current step identifier (optional) |
+| `appModel` | `FormModel` | Form model data (optional) |
+| `currentLanguageIso` | `string` | Language ISO code (e.g., 'en', 'ro') |
+| `showLanguageSelector` | `boolean` | Show/hide language selector (default: true) |
+| `showDisplayMode` | `boolean` | Enable display mode (default: false) |
+| `isDemoMode` | `boolean` | Enable demo mode (default: false) |
+| `fillData` | `any` | Pre-fill form data (optional) |
+| `env` | `string` | Environment type (optional) |
+
+### Component Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `event` | `EventEmitter` | Emits form events (success, error, step changes, etc.) |
+
+## Exported Services
+
+The library exports the following services that can be injected:
+
+- `ConfigService` - Manage application configuration
+- `OriginFormAuthService` - Handle authentication
+- `ApplicationDataService` - Manage application data
+- `FormsService` - Form operations
+- `LanguageService` - Language management
+- `DictionaryService` - Dictionary/lookup data
+- `TranslationService` - Translations
+- `DialogService` - Dialog/modal management
+
+## License
+
+Proprietary - Qoobiss

package/esm2022/lib/action-step-handler.mjs

@@ -151,10 +151,10 @@ export class ActionStepHandler {
         this.executionCompleted.complete();
         this.actionExecuting$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionStepHandler, deps: [{ token: i1.ApplicationDataService }, { token: i2.DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionStepHandler, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionStepHandler, deps: [{ token: i1.ApplicationDataService }, { token: i2.DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionStepHandler, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionStepHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionStepHandler, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/esm2022/lib/auth-client.service.mjs

@@ -57,10 +57,10 @@ export class AuthenticationClient {
         }
         return urlEncodedParams.toString();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationClient, deps: [{ token: i1.HttpClient }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationClient, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthenticationClient, deps: [{ token: i1.HttpClient }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthenticationClient, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationClient, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthenticationClient, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/esm2022/lib/formly/baseFormlyControlComponent.mjs

@@ -39,10 +39,10 @@ export class BaseFormlyControlComponent extends FieldType {
         }
         return errorMessage;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseFormlyControlComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BaseFormlyControlComponent, selector: "base-formly-component", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseFormlyControlComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BaseFormlyControlComponent, selector: "base-formly-component", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseFormlyControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseFormlyControlComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'base-formly-component',

package/esm2022/lib/formly/baseFormlyStepComponent.mjs

@@ -46,10 +46,10 @@ export class BaseFormlyStepComponent extends FieldType {
         }
         return errorMessage;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseFormlyStepComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BaseFormlyStepComponent, selector: "base-formly-component", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseFormlyStepComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BaseFormlyStepComponent, selector: "base-formly-component", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseFormlyStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseFormlyStepComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'base-formly-component',

package/esm2022/lib/formly/custom-section-separator.component.mjs

@@ -4,8 +4,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@ngx-formly/core";
 export class CustomSectionComponent extends FieldType {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomSectionComponent, selector: "formly-custom-section", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CustomSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CustomSectionComponent, selector: "formly-custom-section", usesInheritance: true, ngImport: i0, template: `
     <div class="custom-section">
       <ng-container *ngFor="let field of field.fieldGroup">
         <formly-field
@@ -16,7 +16,7 @@ export class CustomSectionComponent extends FieldType {
     </div>
   `, isInline: true, styles: [".custom-section{display:grid;gap:5px;margin-bottom:5px;grid-template-columns:repeat(12,1fr)}.full-width{grid-column:span 12}.half-width{grid-column:span 6}.quarter-width{grid-column:span 3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.FormlyField, selector: "formly-field", inputs: ["field"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CustomSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'formly-custom-section', template: `
     <div class="custom-section">

package/esm2022/lib/formly/form-section-separator.component.mjs

@@ -12,8 +12,8 @@ export class FormSectionSeparatorComponent extends FieldType {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormSectionSeparatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormSectionSeparatorComponent, selector: "form-section-separator", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormSectionSeparatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormSectionSeparatorComponent, selector: "form-section-separator", usesInheritance: true, ngImport: i0, template: `
     <div class="separator" style="margin: 2% ;">
       <h2 *ngIf="to && to['title']" [ngStyle]="heading2Style">
         {{ to['title'] }}
@@ -22,7 +22,7 @@ export class FormSectionSeparatorComponent extends FieldType {
     </div>
   `, isInline: true, styles: [".separator{margin:2% 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormSectionSeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormSectionSeparatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'form-section-separator', template: `
     <div class="separator" style="margin: 2% ;">

package/esm2022/lib/formly/formly-action.mjs

@@ -30,8 +30,8 @@ export class FormlyActionComponent extends BaseFormlyStepComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyActionComponent, selector: "formly-field-action", outputs: { actionCompleted: "actionCompleted" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyActionComponent, selector: "formly-field-action", outputs: { actionCompleted: "actionCompleted" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <div class="loader-container">
       <mat-spinner *ngIf="loading" class="l-x-auto"></mat-spinner>
     </div>
@@ -40,7 +40,7 @@ export class FormlyActionComponent extends BaseFormlyStepComponent {
     </ng-container>
   `, isInline: true, styles: [".loader-container{display:flex;justify-content:center;align-items:center;padding-top:5vh;padding-bottom:5vh}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'formly-field-action', template: `
     <div class="loader-container">

package/esm2022/lib/formly/formly-checkbox/formly-checkbox.component.mjs

@@ -42,10 +42,10 @@ export class FormlyCheckboxComponent extends FieldType {
             this.cd.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyCheckboxComponent, selector: "formly-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-mdc-text-field-wrapper mdc-checkbox-field\" appExternalLink>\n  <mat-checkbox [formControl]=\"checkbox\">\n    <markdown [data]=\"props['label']\"></markdown>\n  </mat-checkbox>\n\n  <div *ngIf=\"showError\" class=\"text-error m-l-20\">\n    {{ requiredMessage }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i5.ExternalLinkDirective, selector: "[appExternalLink]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyCheckboxComponent, selector: "formly-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-mdc-text-field-wrapper mdc-checkbox-field\" appExternalLink>\n  <mat-checkbox [formControl]=\"checkbox\">\n    <markdown [data]=\"props['label']\"></markdown>\n  </mat-checkbox>\n\n  <div *ngIf=\"showError\" class=\"text-error m-l-20\">\n    {{ requiredMessage }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i5.ExternalLinkDirective, selector: "[appExternalLink]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'formly-checkbox', template: "<div class=\"mat-mdc-text-field-wrapper mdc-checkbox-field\" appExternalLink>\n  <mat-checkbox [formControl]=\"checkbox\">\n    <markdown [data]=\"props['label']\"></markdown>\n  </mat-checkbox>\n\n  <div *ngIf=\"showError\" class=\"text-error m-l-20\">\n    {{ requiredMessage }}\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });

package/esm2022/lib/formly/formly-dictionary-dropdown-tree/formly-dictionary-dropdown-tree.component.mjs

@@ -241,10 +241,10 @@ export class FormlyDictionaryDropdownTreeComponent extends FieldType {
     getDictionaryLabel(dictionaryId) {
         return this.dictionaryLabels[dictionaryId] || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyDictionaryDropdownTreeComponent, deps: [{ token: i1.DictionaryService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyDictionaryDropdownTreeComponent, selector: "formly-dictionary-dropdown-tree", inputs: { dictionaryId: "dictionaryId" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autoInput", first: true, predicate: ["autoInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form>\n  <mat-label class=\"component-data-label m-l-2\" [ngStyle]=\"labelStyle\">\n    {{ label }}</mat-label\n  >\n  <mat-form-field class=\"full-width\">\n    <input\n      type=\"text\"\n      placeholder=\"{{ selectedValueText }}\"\n      #autoInput\n      aria-label=\"Text\"\n      matInput\n      [matAutocomplete]=\"auto\"\n      (input)=\"filterChanged($event)\"\n      (focus)=\"openAutocomplete()\"\n    />\n    <mat-icon matSuffix (click)=\"toggleAutocomplete($event)\"\n      >keyboard_arrow_down</mat-icon\n    >\n    <mat-autocomplete\n      #matAutocomplete=\"matAutocomplete\"\n      #auto=\"matAutocomplete\"\n      autoActiveFirstOption\n      (optionSelected)=\"\n        onSelectedDictionaryValuesChanged([$event.option.value])\n      \"\n    >\n      <mat-option disabled>{{\n        formlyKeys.selectAnItem | translate\n      }}</mat-option>\n      <app-dictionaries-tree\n        [allowCheckItems]=\"false\"\n        [drawReferenceDictionariesAsSeparateNode]=\"false\"\n        [drawChildDictionariesAsSeparateNode]=\"false\"\n        [drawRootNode]=\"false\"\n        [filterText]=\"filteredText\"\n        [allowSelectNonLeafNodes]=\"true\"\n        [selectedValueIds]=\"selectedValueIds\"\n        [languageId]=\"currentLanguageId\"\n        [valuesIdsToShow]=\"valuesIdsToShow\"\n        [selectedRelatedDictionaries]=\"selectedRelatedDictionaries\"\n        [dictionaryLabels]=\"dictionaryLabels\"\n        [preloadedDictionary]=\"preloadedDictionary\"\n        [preloadedDictionaries]=\"preloadedDictionaries\"\n        [usePreloadedData]=\"usePreloadedData\"\n        (selectedDictionaryValuesChanged)=\"\n          onSelectedDictionaryValuesChanged($event)\n        \"\n      >\n      </app-dictionaries-tree>\n    </mat-autocomplete>\n  </mat-form-field>\n\n  <formly-validation-message *ngIf=\"showError\" [field]=\"field\">\n  </formly-validation-message>\n</form>\n", styles: ["formly-validation-message{color:red;font-size:12px}::ng-deep .mat-mdc-autocomplete-panel>app-dictionaries-tree>app-treeview>cdk-virtual-scroll-viewport{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "component", type: i10.DictionariesTreeComponent, selector: "app-dictionaries-tree", inputs: ["dictionaryId", "selectedValueIds", "allowCheckItems", "allowFilter", "drawReferenceDictionariesAsSeparateNode", "drawChildDictionariesAsSeparateNode", "drawRootNode", "filterText", "allowSelectNonLeafNodes", "languageId", "valuesIdsToShow", "hideParentArrow", "preloadedDictionary", "preloadedDictionaries", "usePreloadedData"], outputs: ["selectedDictionaryValuesChanged"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyDictionaryDropdownTreeComponent, deps: [{ token: i1.DictionaryService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyDictionaryDropdownTreeComponent, selector: "formly-dictionary-dropdown-tree", inputs: { dictionaryId: "dictionaryId" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autoInput", first: true, predicate: ["autoInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form>\n  <mat-label class=\"component-data-label m-l-2\" [ngStyle]=\"labelStyle\">\n    {{ label }}</mat-label\n  >\n  <mat-form-field class=\"full-width\">\n    <input\n      type=\"text\"\n      placeholder=\"{{ selectedValueText }}\"\n      #autoInput\n      aria-label=\"Text\"\n      matInput\n      [matAutocomplete]=\"auto\"\n      (input)=\"filterChanged($event)\"\n      (focus)=\"openAutocomplete()\"\n    />\n    <mat-icon matSuffix (click)=\"toggleAutocomplete($event)\"\n      >keyboard_arrow_down</mat-icon\n    >\n    <mat-autocomplete\n      #matAutocomplete=\"matAutocomplete\"\n      #auto=\"matAutocomplete\"\n      autoActiveFirstOption\n      (optionSelected)=\"\n        onSelectedDictionaryValuesChanged([$event.option.value])\n      \"\n    >\n      <mat-option disabled>{{\n        formlyKeys.selectAnItem | translate\n      }}</mat-option>\n      <app-dictionaries-tree\n        [allowCheckItems]=\"false\"\n        [drawReferenceDictionariesAsSeparateNode]=\"false\"\n        [drawChildDictionariesAsSeparateNode]=\"false\"\n        [drawRootNode]=\"false\"\n        [filterText]=\"filteredText\"\n        [allowSelectNonLeafNodes]=\"true\"\n        [selectedValueIds]=\"selectedValueIds\"\n        [languageId]=\"currentLanguageId\"\n        [valuesIdsToShow]=\"valuesIdsToShow\"\n        [selectedRelatedDictionaries]=\"selectedRelatedDictionaries\"\n        [dictionaryLabels]=\"dictionaryLabels\"\n        [preloadedDictionary]=\"preloadedDictionary\"\n        [preloadedDictionaries]=\"preloadedDictionaries\"\n        [usePreloadedData]=\"usePreloadedData\"\n        (selectedDictionaryValuesChanged)=\"\n          onSelectedDictionaryValuesChanged($event)\n        \"\n      >\n      </app-dictionaries-tree>\n    </mat-autocomplete>\n  </mat-form-field>\n\n  <formly-validation-message *ngIf=\"showError\" [field]=\"field\">\n  </formly-validation-message>\n</form>\n", styles: ["formly-validation-message{color:red;font-size:12px}::ng-deep .mat-mdc-autocomplete-panel>app-dictionaries-tree>app-treeview>cdk-virtual-scroll-viewport{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "component", type: i10.DictionariesTreeComponent, selector: "app-dictionaries-tree", inputs: ["dictionaryId", "selectedValueIds", "allowCheckItems", "allowFilter", "drawReferenceDictionariesAsSeparateNode", "drawChildDictionariesAsSeparateNode", "drawRootNode", "filterText", "allowSelectNonLeafNodes", "languageId", "valuesIdsToShow", "hideParentArrow", "preloadedDictionary", "preloadedDictionaries", "usePreloadedData"], outputs: ["selectedDictionaryValuesChanged"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyDictionaryDropdownTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyDictionaryDropdownTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'formly-dictionary-dropdown-tree', template: "<form>\n  <mat-label class=\"component-data-label m-l-2\" [ngStyle]=\"labelStyle\">\n    {{ label }}</mat-label\n  >\n  <mat-form-field class=\"full-width\">\n    <input\n      type=\"text\"\n      placeholder=\"{{ selectedValueText }}\"\n      #autoInput\n      aria-label=\"Text\"\n      matInput\n      [matAutocomplete]=\"auto\"\n      (input)=\"filterChanged($event)\"\n      (focus)=\"openAutocomplete()\"\n    />\n    <mat-icon matSuffix (click)=\"toggleAutocomplete($event)\"\n      >keyboard_arrow_down</mat-icon\n    >\n    <mat-autocomplete\n      #matAutocomplete=\"matAutocomplete\"\n      #auto=\"matAutocomplete\"\n      autoActiveFirstOption\n      (optionSelected)=\"\n        onSelectedDictionaryValuesChanged([$event.option.value])\n      \"\n    >\n      <mat-option disabled>{{\n        formlyKeys.selectAnItem | translate\n      }}</mat-option>\n      <app-dictionaries-tree\n        [allowCheckItems]=\"false\"\n        [drawReferenceDictionariesAsSeparateNode]=\"false\"\n        [drawChildDictionariesAsSeparateNode]=\"false\"\n        [drawRootNode]=\"false\"\n        [filterText]=\"filteredText\"\n        [allowSelectNonLeafNodes]=\"true\"\n        [selectedValueIds]=\"selectedValueIds\"\n        [languageId]=\"currentLanguageId\"\n        [valuesIdsToShow]=\"valuesIdsToShow\"\n        [selectedRelatedDictionaries]=\"selectedRelatedDictionaries\"\n        [dictionaryLabels]=\"dictionaryLabels\"\n        [preloadedDictionary]=\"preloadedDictionary\"\n        [preloadedDictionaries]=\"preloadedDictionaries\"\n        [usePreloadedData]=\"usePreloadedData\"\n        (selectedDictionaryValuesChanged)=\"\n          onSelectedDictionaryValuesChanged($event)\n        \"\n      >\n      </app-dictionaries-tree>\n    </mat-autocomplete>\n  </mat-form-field>\n\n  <formly-validation-message *ngIf=\"showError\" [field]=\"field\">\n  </formly-validation-message>\n</form>\n", styles: ["formly-validation-message{color:red;font-size:12px}::ng-deep .mat-mdc-autocomplete-panel>app-dictionaries-tree>app-treeview>cdk-virtual-scroll-viewport{overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i1.DictionaryService }, { type: i0.ChangeDetectorRef }], propDecorators: { autocompleteTrigger: [{

package/esm2022/lib/formly/formly-download-documents/formly-download-documents.component.mjs

@@ -116,10 +116,10 @@ export class FormlyDownloadDocumentsComponent extends BaseFormlyControlComponent
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyDownloadDocumentsComponent, deps: [{ token: i1.ApplicationDataService }, { token: i2.DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyDownloadDocumentsComponent, selector: "app-formly-download-documents", usesInheritance: true, ngImport: i0, template: "<p *ngIf=\"title\">\n  {{ title }}\n</p>\n<p *ngIf=\"isLoading === false && (!documents || documents.length === 0)\">\n  {{ getErrorTranslationMessage(\"noDocumentsToDownload\") }}\n</p>\n<mat-spinner *ngIf=\"isLoading === true\" class=\"m-x-auto\"></mat-spinner>\n<table *ngIf=\"isLoading === false && documents\">\n  <thead class=\"table-head\">\n    <tr>\n      <th>\n        {{ \"document\" | translate }}\n      </th>\n      <th>\n        {{ \"common.actions.download\" | translate }}\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"table-detail\">\n    <tr *ngFor=\"let doc of documents; let i = index\">\n      <td class=\"text-center\">\n        {{ doc.name }}\n      </td>\n      <td class=\"text-center d-flex justify-content-center align-items-center\">\n        <button\n          (click)=\"downloadDocument(doc, i)\"\n          mat-stroked-button\n          color=\"primary\"\n          class=\"custom-field\"\n        >\n          <mat-icon>download</mat-icon>\n          {{ \"common.actions.download\" | translate }}\n        </button>\n        <div class=\"m-x-1 upload-spinner\">\n          <mat-spinner\n            *ngIf=\"isDownloading && docIndex === i\"\n            mode=\"indeterminate\"\n            [diameter]=\"30\"\n          ></mat-spinner>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [".upload-spinner{width:30px!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyDownloadDocumentsComponent, deps: [{ token: i1.ApplicationDataService }, { token: i2.DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyDownloadDocumentsComponent, selector: "app-formly-download-documents", usesInheritance: true, ngImport: i0, template: "<p *ngIf=\"title\">\n  {{ title }}\n</p>\n<p *ngIf=\"isLoading === false && (!documents || documents.length === 0)\">\n  {{ getErrorTranslationMessage(\"noDocumentsToDownload\") }}\n</p>\n<mat-spinner *ngIf=\"isLoading === true\" class=\"m-x-auto\"></mat-spinner>\n<table *ngIf=\"isLoading === false && documents\">\n  <thead class=\"table-head\">\n    <tr>\n      <th>\n        {{ \"document\" | translate }}\n      </th>\n      <th>\n        {{ \"common.actions.download\" | translate }}\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"table-detail\">\n    <tr *ngFor=\"let doc of documents; let i = index\">\n      <td class=\"text-center\">\n        {{ doc.name }}\n      </td>\n      <td class=\"text-center d-flex justify-content-center align-items-center\">\n        <button\n          (click)=\"downloadDocument(doc, i)\"\n          mat-stroked-button\n          color=\"primary\"\n          class=\"custom-field\"\n        >\n          <mat-icon>download</mat-icon>\n          {{ \"common.actions.download\" | translate }}\n        </button>\n        <div class=\"m-x-1 upload-spinner\">\n          <mat-spinner\n            *ngIf=\"isDownloading && docIndex === i\"\n            mode=\"indeterminate\"\n            [diameter]=\"30\"\n          ></mat-spinner>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [".upload-spinner{width:30px!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyDownloadDocumentsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyDownloadDocumentsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-formly-download-documents', template: "<p *ngIf=\"title\">\n  {{ title }}\n</p>\n<p *ngIf=\"isLoading === false && (!documents || documents.length === 0)\">\n  {{ getErrorTranslationMessage(\"noDocumentsToDownload\") }}\n</p>\n<mat-spinner *ngIf=\"isLoading === true\" class=\"m-x-auto\"></mat-spinner>\n<table *ngIf=\"isLoading === false && documents\">\n  <thead class=\"table-head\">\n    <tr>\n      <th>\n        {{ \"document\" | translate }}\n      </th>\n      <th>\n        {{ \"common.actions.download\" | translate }}\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"table-detail\">\n    <tr *ngFor=\"let doc of documents; let i = index\">\n      <td class=\"text-center\">\n        {{ doc.name }}\n      </td>\n      <td class=\"text-center d-flex justify-content-center align-items-center\">\n        <button\n          (click)=\"downloadDocument(doc, i)\"\n          mat-stroked-button\n          color=\"primary\"\n          class=\"custom-field\"\n        >\n          <mat-icon>download</mat-icon>\n          {{ \"common.actions.download\" | translate }}\n        </button>\n        <div class=\"m-x-1 upload-spinner\">\n          <mat-spinner\n            *ngIf=\"isDownloading && docIndex === i\"\n            mode=\"indeterminate\"\n            [diameter]=\"30\"\n          ></mat-spinner>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [".upload-spinner{width:30px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.ApplicationDataService }, { type: i2.DialogService }, { type: i0.ChangeDetectorRef }] });

package/esm2022/lib/formly/formly-enrol-card/formly-enrol-card.component.mjs

@@ -107,10 +107,10 @@ export class FormlyEnrolCardComponent extends BaseFormlyStepComponent {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyEnrolCardComponent, deps: [{ token: i1.ApplicationDataService }, { token: i2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyEnrolCardComponent, selector: "app-enrol-card", usesInheritance: true, ngImport: i0, template: "<p *ngIf=\"this.isAlreadyEnroled\">\n  {{ props[\"labels\"].cardenrolSuccessLabel }}\n</p>\n<p *ngIf=\"this.paymentError\">{{ props[\"labels\"].cardenrolFailureLabel }}</p>\n<mat-spinner *ngIf=\"isLoading\" class=\"m-x-auto upload-spinner\"></mat-spinner>\n\n<div>\n  <div *ngFor=\"let section of stepData?.sections\">\n    <div *ngFor=\"let control of section.presentationControls\">\n      <p class=\"font-paragraph\">\n        {{ getTranslatedLabel(control.translations) }}\n      </p>\n      <p class=\"font-paragraph\">\n        {{\n          getTranslatedLabel(\n            control.specificControlData?.descriptionTranslations\n          )\n        }}\n      </p>\n    </div>\n  </div>\n</div>\n\n<button\n  mat-flat-button\n  type=\"button\"\n  (click)=\"goToUrl()\"\n  [disabled]=\"isLoading || isAlreadyEnroled\"\n  class=\"btn btn-primary m-t-20 m-b-20 w-100\"\n>\n  {{ props[\"labels\"].cardenrolButtonLabel }}\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyEnrolCardComponent, deps: [{ token: i1.ApplicationDataService }, { token: i2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyEnrolCardComponent, selector: "app-enrol-card", usesInheritance: true, ngImport: i0, template: "<p *ngIf=\"this.isAlreadyEnroled\">\n  {{ props[\"labels\"].cardenrolSuccessLabel }}\n</p>\n<p *ngIf=\"this.paymentError\">{{ props[\"labels\"].cardenrolFailureLabel }}</p>\n<mat-spinner *ngIf=\"isLoading\" class=\"m-x-auto upload-spinner\"></mat-spinner>\n\n<div>\n  <div *ngFor=\"let section of stepData?.sections\">\n    <div *ngFor=\"let control of section.presentationControls\">\n      <p class=\"font-paragraph\">\n        {{ getTranslatedLabel(control.translations) }}\n      </p>\n      <p class=\"font-paragraph\">\n        {{\n          getTranslatedLabel(\n            control.specificControlData?.descriptionTranslations\n          )\n        }}\n      </p>\n    </div>\n  </div>\n</div>\n\n<button\n  mat-flat-button\n  type=\"button\"\n  (click)=\"goToUrl()\"\n  [disabled]=\"isLoading || isAlreadyEnroled\"\n  class=\"btn btn-primary m-t-20 m-b-20 w-100\"\n>\n  {{ props[\"labels\"].cardenrolButtonLabel }}\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyEnrolCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyEnrolCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-enrol-card', template: "<p *ngIf=\"this.isAlreadyEnroled\">\n  {{ props[\"labels\"].cardenrolSuccessLabel }}\n</p>\n<p *ngIf=\"this.paymentError\">{{ props[\"labels\"].cardenrolFailureLabel }}</p>\n<mat-spinner *ngIf=\"isLoading\" class=\"m-x-auto upload-spinner\"></mat-spinner>\n\n<div>\n  <div *ngFor=\"let section of stepData?.sections\">\n    <div *ngFor=\"let control of section.presentationControls\">\n      <p class=\"font-paragraph\">\n        {{ getTranslatedLabel(control.translations) }}\n      </p>\n      <p class=\"font-paragraph\">\n        {{\n          getTranslatedLabel(\n            control.specificControlData?.descriptionTranslations\n          )\n        }}\n      </p>\n    </div>\n  </div>\n</div>\n\n<button\n  mat-flat-button\n  type=\"button\"\n  (click)=\"goToUrl()\"\n  [disabled]=\"isLoading || isAlreadyEnroled\"\n  class=\"btn btn-primary m-t-20 m-b-20 w-100\"\n>\n  {{ props[\"labels\"].cardenrolButtonLabel }}\n</button>\n" }]
         }], ctorParameters: () => [{ type: i1.ApplicationDataService }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{

package/esm2022/lib/formly/formly-field-stepper/formly-field-stepper.component.mjs

@@ -737,8 +737,8 @@ export class FormlyFieldStepperComponent extends FieldType {
             [FluxType.Kyc]: 'Kyc',
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyFieldStepperComponent, deps: [{ token: i1.ApplicationDataService }, { token: i2.CollectorFormComponent }, { token: i0.ChangeDetectorRef }, { token: i3.ScrollToErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyFieldStepperComponent, selector: "app-formly-field-stepper", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyFieldStepperComponent, deps: [{ token: i1.ApplicationDataService }, { token: i2.CollectorFormComponent }, { token: i0.ChangeDetectorRef }, { token: i3.ScrollToErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyFieldStepperComponent, selector: "app-formly-field-stepper", providers: [
             {
                 provide: STEPPER_GLOBAL_OPTIONS,
                 useValue: { displayDefaultIndicatorType: false },
@@ -746,7 +746,7 @@ export class FormlyFieldStepperComponent extends FieldType {
             ApplicationDataService,
         ], viewQueries: [{ propertyName: "stepper", first: true, predicate: MatStepper, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"showSteps; else singleStepTemplate\">\n  <div [ngStyle]=\"concatenatedFormStyle\">\n    <formly-field\n      *ngIf=\"showFinalStep\"\n      [field]=\"finalStepFieldConfig\"\n    ></formly-field>\n  </div>\n\n  <mat-horizontal-stepper\n    #stepper\n    *ngIf=\"!showFinalStep\"\n    [linear]=\"true\"\n    (selectionChange)=\"onStepChange($event)\"\n    [ngStyle]=\"concatenatedFormStyle\"\n  >\n    <mat-step *ngFor=\"let step of field.fieldGroup; let index = index\">\n      <ng-template matStepLabel *ngIf=\"showStepsLabels\">\n        {{ step.props?.label }}\n      </ng-template>\n\n      <ng-container\n        *ngIf=\"buttonsVerticalPosition == 'top'\"\n        [ngTemplateOutlet]=\"buttonsContainer\"\n      />\n\n      <h3 [ngStyle]=\"field.props?.['design']['.font-heading-3'] || {}\">\n        {{ step.props?.description }}\n      </h3>\n      <formly-field [field]=\"step\"></formly-field>\n\n      <ng-container\n        *ngIf=\"buttonsVerticalPosition == 'bottom'\"\n        [ngTemplateOutlet]=\"buttonsContainer\"\n      />\n    </mat-step>\n    <!-- <ng-template *ngIf=\"!showStepsCounter\" matStepperIcon=\"number\">\n      <mat-icon>radio_button_checked</mat-icon>\n    </ng-template> -->\n  </mat-horizontal-stepper>\n</div>\n\n<ng-template #singleStepTemplate>\n  <div [ngStyle]=\"concatenatedFormStyle\">\n    <formly-field\n      *ngIf=\"showFinalStep\"\n      [field]=\"finalStepFieldConfig\"\n    ></formly-field>\n  </div>\n  <div\n    class=\"single-step-container\"\n    *ngIf=\"!showFinalStep\"\n    [ngStyle]=\"concatenatedFormStyle\"\n  >\n    <div\n      class=\"progress-bar-wrapper\"\n      *ngIf=\"showProgressBar\"\n      [ngStyle]=\"{\n        'border-radius': progressBarStyles.borderRadius,\n         height: progressBarStyles.height,\n         overflow: 'hidden'\n      }\"\n    >\n      <div\n        class=\"progress-bar-fill\"\n        [ngStyle]=\"{\n          width: ((currentStepIndex + 1) / totalStepsCount) * 100 + '%',\n          background: getProgressBarFill(),\n          height: '100%'\n        }\"\n      ></div>\n    </div>\n   <div class=\"single-step-header\">\n      <div\n        class=\"single-step-indicator\"\n        *ngIf=\"showStepsCounter;\"\n      >\n        <span class=\"step-current\">{{ currentStepIndex + 1 }}</span>\n        <span class=\"step-separator\">/</span>\n        <span class=\"step-total\">{{ totalStepsCount }}</span>\n      </div>\n      <h1 *ngIf=\"showStepsLabels\" class=\"single-step-label\"  [ngStyle]=\"field.props?.['design']['.font-heading-1'] || {}\">\n        {{ field.fieldGroup![currentStepIndex]!.props!.label }}\n      </h1>\n    </div>\n\n    <ng-container\n      *ngIf=\"buttonsVerticalPosition == 'top'\"\n      [ngTemplateOutlet]=\"buttonsContainer\"\n    />\n\n    <h3 [ngStyle]=\"field.props?.['design']['.font-heading-3'] || {}\">\n      {{ field!.fieldGroup![currentStepIndex]!.props!.description }}\n    </h3>\n    <formly-field\n      *ngIf=\"loadedSteps[currentStepIndex]\"\n      [field]=\"field!.fieldGroup![currentStepIndex]\"\n    ></formly-field>\n\n    <ng-container\n      *ngIf=\"buttonsVerticalPosition == 'bottom'\"\n      [ngTemplateOutlet]=\"buttonsContainer\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #buttonsContainer>\n  <ng-container\n    *ngTemplateOutlet=\"\n      buttonsTemplate;\n      context: {\n        index: currentStepIndex,\n        step: field!.fieldGroup![currentStepIndex]\n      }\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template #buttonsTemplate let-index=\"index\" let-step=\"step\">\n  <div\n    *ngIf=\"!isFlowFinished\"\n    class=\"buttons-container\"\n    [ngStyle]=\"field.props?.['design']['.buttons-container'] || {}\"\n  >\n    <button mat-flat-button *ngIf=\"isDebug\" (click)=\"retryClick(step)\">\n      Debug Retry\n    </button>\n    <ng-container *ngFor=\"let button of buttonsGroups[index]\">\n      <button\n        mat-flat-button\n        [color]=\"button.color || 'primary'\"\n        [type]=\"button.type === 'submit' ? 'submit' : 'button'\"\n        (click)=\"buttonClick(button.type, step)\"\n        [disabled]=\"button.disabled || isSaving\"\n        [ngStyle]=\"button.style\"\n      >\n        {{ button.label }}\n      </button>\n    </ng-container>\n    <div *ngIf=\"isNavigating || isSaving\" class=\"loading-spinner\">\n      <mat-spinner [diameter]=\"32\"></mat-spinner>\n    </div>\n    <button mat-flat-button *ngIf=\"isDebug\" (click)=\"buttonClick('next', step)\">\n      Debug Next\n    </button>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.buttons-container button{margin-right:5px}::ng-deep .mat-horizontal-stepper-header{pointer-events:none!important}.single-step-container{overflow:hidden;padding:0 24px 24px}.single-step-indicator{color:#000;display:flex;align-items:center;justify-content:center;margin-right:1%;font-weight:600}.step-current{font-size:1rem}.step-separator{font-size:.8rem;opacity:.8;margin:0 2px}.step-total{font-size:.9rem;opacity:.8}.single-step-icon{font-size:1.5rem;color:#6b7de1;opacity:.7;transition:opacity .2s ease}.single-step-icon:hover{opacity:1}.single-step-header{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;padding-bottom:.75rem}.single-step-header:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:var(--progress-percent, 0);height:4px;border-radius:2px;background:linear-gradient(135deg,#6b7de1,#9fa8f5);transition:width .3s ease}.single-step-header{display:flex;align-items:center;justify-content:center}.single-step-label{width:auto!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i5.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i5.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.FormlyField, selector: "formly-field", inputs: ["field"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyFieldStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyFieldStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-formly-field-stepper', providers: [
                         {

package/esm2022/lib/formly/formly-generate-documents/formly-generate-documents.component.mjs

@@ -47,10 +47,10 @@ export class FormlyGenerateDocumentsComponent extends BaseFormlyStepComponent {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyGenerateDocumentsComponent, deps: [{ token: i1.ApplicationDataService }, { token: i0.ChangeDetectorRef }, { token: i2.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyGenerateDocumentsComponent, selector: "app-formly-generate-documents", usesInheritance: true, ngImport: i0, template: "<p *ngIf=\"isLoading\">{{ \"generateDocuments.generating\" | translate }}</p>\n<mat-spinner *ngIf=\"isLoading\"\n             class=\"m-x-auto upload-spinner\"></mat-spinner>\n\n<div>\n  <p *ngIf=\"!isLoading && !hasErrors && generatedDocumentsCount > 0\">\n    {{ \"generateDocuments.generated\" | translate }}\n  </p>\n  <p *ngIf=\"!isLoading && !hasErrors && generatedDocumentsCount <= 0\">\n    {{ \"generateDocuments.noDocumentsGenerated\" | translate }}\n  </p>\n</div>\n<div *ngIf=\"hasErrors\">\n  <p>{{ \"generateDocuments.error\" | translate }}</p>\n  <button mat-flat-button type=\"button\" (click)=\"generateDocuments()\">\n    {{ \"retry\" | translate }}\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyGenerateDocumentsComponent, deps: [{ token: i1.ApplicationDataService }, { token: i0.ChangeDetectorRef }, { token: i2.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyGenerateDocumentsComponent, selector: "app-formly-generate-documents", usesInheritance: true, ngImport: i0, template: "<p *ngIf=\"isLoading\">{{ \"generateDocuments.generating\" | translate }}</p>\n<mat-spinner *ngIf=\"isLoading\"\n             class=\"m-x-auto upload-spinner\"></mat-spinner>\n\n<div>\n  <p *ngIf=\"!isLoading && !hasErrors && generatedDocumentsCount > 0\">\n    {{ \"generateDocuments.generated\" | translate }}\n  </p>\n  <p *ngIf=\"!isLoading && !hasErrors && generatedDocumentsCount <= 0\">\n    {{ \"generateDocuments.noDocumentsGenerated\" | translate }}\n  </p>\n</div>\n<div *ngIf=\"hasErrors\">\n  <p>{{ \"generateDocuments.error\" | translate }}</p>\n  <button mat-flat-button type=\"button\" (click)=\"generateDocuments()\">\n    {{ \"retry\" | translate }}\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyGenerateDocumentsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyGenerateDocumentsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-formly-generate-documents', template: "<p *ngIf=\"isLoading\">{{ \"generateDocuments.generating\" | translate }}</p>\n<mat-spinner *ngIf=\"isLoading\"\n             class=\"m-x-auto upload-spinner\"></mat-spinner>\n\n<div>\n  <p *ngIf=\"!isLoading && !hasErrors && generatedDocumentsCount > 0\">\n    {{ \"generateDocuments.generated\" | translate }}\n  </p>\n  <p *ngIf=\"!isLoading && !hasErrors && generatedDocumentsCount <= 0\">\n    {{ \"generateDocuments.noDocumentsGenerated\" | translate }}\n  </p>\n</div>\n<div *ngIf=\"hasErrors\">\n  <p>{{ \"generateDocuments.error\" | translate }}</p>\n  <button mat-flat-button type=\"button\" (click)=\"generateDocuments()\">\n    {{ \"retry\" | translate }}\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.ApplicationDataService }, { type: i0.ChangeDetectorRef }, { type: i2.DialogService }] });

package/esm2022/lib/formly/formly-identification.component.mjs

@@ -39,8 +39,8 @@ export class FormlyFieldIdentificationComponent extends BaseFormlyStepComponent
     getLoadingMessage() {
         return this.props['loadingMessage'] || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyFieldIdentificationComponent, deps: [{ token: i1.ProxyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyFieldIdentificationComponent, selector: "formly-field-identification", outputs: { ectCompleted: "ectCompleted" }, viewQueries: [{ propertyName: "identification", first: true, predicate: ["identification"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyFieldIdentificationComponent, deps: [{ token: i1.ProxyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyFieldIdentificationComponent, selector: "formly-field-identification", outputs: { ectCompleted: "ectCompleted" }, viewQueries: [{ propertyName: "identification", first: true, predicate: ["identification"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-container *ngIf="appDataId && kycToken">
       <identification-component
         #identification
@@ -57,7 +57,7 @@ export class FormlyFieldIdentificationComponent extends BaseFormlyStepComponent
     </ng-container>
   `, isInline: true, styles: [":host{min-height:600px;display:block}.loader-container{display:flex;justify-content:center;align-items:center;padding-top:5vh;padding-bottom:5vh}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyFieldIdentificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyFieldIdentificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'formly-field-identification', template: `
     <ng-container *ngIf="appDataId && kycToken">

package/esm2022/lib/formly/formly-open-banking/formly-open-banking.component.mjs

@@ -580,10 +580,10 @@ export class FormlyOpenBankingComponent extends BaseFormlyStepComponent {
         this.pollSubscription?.unsubscribe();
         this.isLoadingSubject.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyOpenBankingComponent, deps: [{ token: i1.OpenBankingService }, { token: i2.DialogService }, { token: i3.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyOpenBankingComponent, selector: "app-formly-open-banking", usesInheritance: true, ngImport: i0, template: "<div class=\"open-banking-container\">\n  <!-- Initial State -->\n  <div *ngIf=\"isInitialState\" class=\"state-initial\">\n    <div class=\"message-container\">\n      <p class=\"message\">{{ initialMessage }}</p>\n      <button mat-raised-button color=\"primary\" (click)=\"proceedToNextStep()\" [disabled]=\"isLoadingSubject | async\">\n        {{ nextButtonLabel }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Bank Selection State -->\n  <div *ngIf=\"isBankSelectionState\" class=\"state-bank-selection\">\n    <h3 class=\"section-title\">{{ selectBankTitle }}</h3>\n\n    <!-- Bank Grid -->\n    <div class=\"banks-grid\" *ngIf=\"banks.length > 0\">\n      <div\n        *ngFor=\"let bank of banks\"\n        class=\"bank-card\"\n        [class.selected]=\"selectedBank === bank.bankCode\"\n        (click)=\"selectBank(bank)\">\n        <div class=\"bank-logo\" *ngIf=\"bank.logoUrl\">\n          <img [src]=\"bank.logoUrl\" [alt]=\"bank.displayName\">\n        </div>\n        <div class=\"bank-info\">\n          <h4>{{ bank.displayName }}</h4>\n          <span class=\"bank-code\">{{ bank.bankCode }}</span>\n        </div>\n        <mat-icon class=\"check-icon\" *ngIf=\"selectedBank === bank.bankCode\">check_circle</mat-icon>\n      </div>\n    </div>\n\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"proceedToNextStep()\"\n      [disabled]=\"!selectedBank || (isLoadingSubject | async)\"\n      class=\"m-t-16\">\n      {{ continueButtonLabel }}\n    </button>\n  </div>\n\n  <!-- Consent State -->\n  <div *ngIf=\"isConsentState\" class=\"state-consent\">\n    <div class=\"consent-header\">\n      <h3>{{ consentTitle }}</h3>\n      <p>{{ consentDescription }}</p>\n    </div>\n\n    <!-- Show iframe only if we have an authorization URL -->\n    <div class=\"consent-container\" *ngIf=\"authorizationUrl\">\n      <iframe\n        [src]=\"authorizationUrl\"\n        class=\"consent-iframe\"\n        frameborder=\"0\"\n        allowfullscreen\n        sandbox=\"allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation\">\n      </iframe>\n    </div>\n\n    <!-- Show waiting message when consent is in popup or iframe failed -->\n    <div class=\"consent-waiting\" *ngIf=\"!authorizationUrl\">\n      <mat-spinner diameter=\"40\"></mat-spinner>\n      <p>{{ waitingForAuthorizationText }}</p>\n      <p class=\"consent-popup-hint\">\n        <mat-icon>open_in_new</mat-icon>\n        <span>{{ popupWindowMessage }}</span>\n      </p>\n      <p class=\"consent-popup-note\">\n        {{ popupBlockerMessage }}\n      </p>\n    </div>\n  </div>\n\n  <!-- Processing State -->\n  <div *ngIf=\"isProcessingState\" class=\"state-processing\">\n    <div class=\"loading-container\">\n      <mat-spinner diameter=\"50\"></mat-spinner>\n      <p class=\"loading-message\">{{ waitingMessage }}</p>\n      <div class=\"progress-details\">\n        <p *ngIf=\"accounts.length > 0\">\n          {{ accountsRetrievedLabel }}: {{ accounts.length }}\n        </p>\n        <p *ngIf=\"transactions.length > 0\">\n          {{ transactionsRetrievedLabel }}: {{ transactions.length }}\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error State -->\n  <div *ngIf=\"isErrorState\" class=\"state-error\">\n    <div class=\"error-container\">\n      <mat-icon color=\"warn\" class=\"error-icon\">error_outline</mat-icon>\n      <p class=\"error-message\">{{ errorMessage }}</p>\n      <button mat-raised-button color=\"primary\" (click)=\"retry()\">\n        {{ retryButtonLabel }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Complete State -->\n  <div *ngIf=\"isCompleteState\" class=\"state-complete\">\n    <div class=\"success-container\">\n      <mat-icon color=\"primary\" class=\"success-icon\">check_circle</mat-icon>\n      <p class=\"success-message\">{{ completionMessage }}</p>\n\n      <!-- Display summary of accounts found -->\n      <div class=\"accounts-summary\" *ngIf=\"accounts.length > 0\">\n        <h4>{{ accountsSummaryText }}</h4>\n        <div class=\"accounts-list\">\n          <div class=\"account-card\" *ngFor=\"let account of accounts\">\n            <div class=\"account-header\">\n              <mat-icon class=\"account-icon\">account_balance</mat-icon>\n              <div class=\"account-info\">\n                <div class=\"account-name\">{{ account.name || 'Account' }}</div>\n                <div class=\"account-iban\">{{ account.iban }}</div>\n              </div>\n            </div>\n            <div class=\"account-details\">\n              <div class=\"account-balance\">\n                <span class=\"balance-amount\">{{ account.balance | currency:account.currency:'symbol':'1.2-2' }}</span>\n              </div>\n              <div class=\"account-holder\">{{ account.accountHolderName }}</div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"transaction-summary\" *ngIf=\"transactions.length > 0\">\n          <p>{{ transactionsSummaryText }}</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".open-banking-container{padding:20px;min-height:400px}.open-banking-container .section-title{margin-bottom:20px;font-size:1.25rem;font-weight:500;color:#000000de}.open-banking-container .message-container,.open-banking-container .loading-container,.open-banking-container .error-container,.open-banking-container .success-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:200px}.open-banking-container .message,.open-banking-container .loading-message,.open-banking-container .error-message,.open-banking-container .success-message{font-size:1rem;margin:20px 0;max-width:600px;line-height:1.5}.open-banking-container .error-message{color:#f44336}.open-banking-container .success-message{color:#4caf50}.open-banking-container .error-icon,.open-banking-container .success-icon{font-size:48px;width:48px;height:48px}.open-banking-container .state-bank-selection .banks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}.open-banking-container .state-bank-selection .bank-card{border:2px solid #e0e0e0;border-radius:8px;padding:16px;cursor:pointer;transition:all .3s ease;position:relative;background:#fff;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}.open-banking-container .state-bank-selection .bank-card:hover{border-color:#3f51b5;box-shadow:0 4px 8px #0000001a;transform:translateY(-2px)}.open-banking-container .state-bank-selection .bank-card.selected{border-color:#3f51b5;background:#f5f7ff}.open-banking-container .state-bank-selection .bank-card .bank-logo{width:80px;height:40px;margin-bottom:8px;display:flex;align-items:center;justify-content:center}.open-banking-container .state-bank-selection .bank-card .bank-logo img{max-width:100%;max-height:100%;object-fit:contain}.open-banking-container .state-bank-selection .bank-card .bank-info{text-align:center}.open-banking-container .state-bank-selection .bank-card .bank-info h4{margin:0;font-size:.9rem;font-weight:500;color:#333}.open-banking-container .state-bank-selection .bank-card .bank-info .bank-code{font-size:.75rem;color:#666;margin-top:4px;display:block}.open-banking-container .state-bank-selection .bank-card .check-icon{position:absolute;top:8px;right:8px;color:#3f51b5;font-size:20px}.open-banking-container .state-bank-selection .bank-dropdown{margin:20px 0}.open-banking-container .state-bank-selection .bank-selector{width:100%;max-width:400px}.open-banking-container .state-consent .consent-header{text-align:center;margin-bottom:20px}.open-banking-container .state-consent .consent-header h3{font-size:1.25rem;font-weight:500;margin-bottom:8px}.open-banking-container .state-consent .consent-header p{color:#666;font-size:.95rem}.open-banking-container .state-consent .consent-container{width:100%;height:600px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;background:#fff}.open-banking-container .state-consent .consent-iframe{width:100%;height:100%}.open-banking-container .state-consent .consent-waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px}.open-banking-container .state-consent .consent-waiting p{margin-top:16px;color:#666}.open-banking-container .state-consent .consent-waiting .consent-popup-hint{display:flex;align-items:center;gap:8px;margin-top:24px;font-size:1.1rem;color:#333}.open-banking-container .state-consent .consent-waiting .consent-popup-hint mat-icon{color:#3f51b5}.open-banking-container .state-consent .consent-waiting .consent-popup-note{margin-top:12px;font-size:.9rem;color:#999;font-style:italic}.open-banking-container .progress-details{margin-top:20px}.open-banking-container .progress-details p{font-size:.9rem;color:#666;margin:4px 0}.open-banking-container .accounts-summary{margin-top:30px;width:100%;max-width:800px}.open-banking-container .accounts-summary h4{font-size:1.15rem;font-weight:500;margin-bottom:20px;color:#000000de}.open-banking-container .accounts-summary .accounts-list{display:flex;flex-direction:column;gap:16px}.open-banking-container .accounts-summary .account-card{border:1px solid #e0e0e0;border-radius:8px;padding:16px;background:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease}.open-banking-container .accounts-summary .account-card:hover{box-shadow:0 2px 6px #00000026}.open-banking-container .accounts-summary .account-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.open-banking-container .accounts-summary .account-icon{color:#3f51b5;margin-top:2px}.open-banking-container .accounts-summary .account-info{flex:1}.open-banking-container .accounts-summary .account-name{font-weight:500;font-size:1rem;color:#333;margin-bottom:4px}.open-banking-container .accounts-summary .account-iban{font-size:.85rem;color:#666;font-family:Courier New,monospace;letter-spacing:.5px}.open-banking-container .accounts-summary .account-details{display:flex;justify-content:space-between;align-items:center;padding-left:36px}.open-banking-container .accounts-summary .account-balance{display:flex;flex-direction:column}.open-banking-container .accounts-summary .balance-amount{font-size:1.25rem;font-weight:600;color:#4caf50}.open-banking-container .accounts-summary .account-holder{font-size:.9rem;color:#666;text-align:right}.open-banking-container .accounts-summary .transaction-summary{margin-top:16px;padding:12px;background:#e8f5e9;border-radius:4px}.open-banking-container .accounts-summary .transaction-summary p{margin:0;color:#2e7d32;font-size:.95rem}.open-banking-container ::ng-deep .mat-spinner{margin:0 auto}.open-banking-container ::ng-deep .mat-progress-spinner circle,.open-banking-container ::ng-deep .mat-spinner circle{stroke:#3f51b5}@media (max-width: 768px){.open-banking-container{padding:10px}.open-banking-container .state-bank-selection .banks-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.open-banking-container .state-bank-selection .bank-card{min-height:100px;padding:12px}.open-banking-container .state-bank-selection .bank-card .bank-logo{width:60px;height:30px}.open-banking-container .consent-container{height:500px}.open-banking-container .accounts-summary{max-width:100%}}@media (max-width: 480px){.open-banking-container .state-bank-selection .banks-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyOpenBankingComponent, deps: [{ token: i1.OpenBankingService }, { token: i2.DialogService }, { token: i3.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyOpenBankingComponent, selector: "app-formly-open-banking", usesInheritance: true, ngImport: i0, template: "<div class=\"open-banking-container\">\n  <!-- Initial State -->\n  <div *ngIf=\"isInitialState\" class=\"state-initial\">\n    <div class=\"message-container\">\n      <p class=\"message\">{{ initialMessage }}</p>\n      <button mat-raised-button color=\"primary\" (click)=\"proceedToNextStep()\" [disabled]=\"isLoadingSubject | async\">\n        {{ nextButtonLabel }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Bank Selection State -->\n  <div *ngIf=\"isBankSelectionState\" class=\"state-bank-selection\">\n    <h3 class=\"section-title\">{{ selectBankTitle }}</h3>\n\n    <!-- Bank Grid -->\n    <div class=\"banks-grid\" *ngIf=\"banks.length > 0\">\n      <div\n        *ngFor=\"let bank of banks\"\n        class=\"bank-card\"\n        [class.selected]=\"selectedBank === bank.bankCode\"\n        (click)=\"selectBank(bank)\">\n        <div class=\"bank-logo\" *ngIf=\"bank.logoUrl\">\n          <img [src]=\"bank.logoUrl\" [alt]=\"bank.displayName\">\n        </div>\n        <div class=\"bank-info\">\n          <h4>{{ bank.displayName }}</h4>\n          <span class=\"bank-code\">{{ bank.bankCode }}</span>\n        </div>\n        <mat-icon class=\"check-icon\" *ngIf=\"selectedBank === bank.bankCode\">check_circle</mat-icon>\n      </div>\n    </div>\n\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"proceedToNextStep()\"\n      [disabled]=\"!selectedBank || (isLoadingSubject | async)\"\n      class=\"m-t-16\">\n      {{ continueButtonLabel }}\n    </button>\n  </div>\n\n  <!-- Consent State -->\n  <div *ngIf=\"isConsentState\" class=\"state-consent\">\n    <div class=\"consent-header\">\n      <h3>{{ consentTitle }}</h3>\n      <p>{{ consentDescription }}</p>\n    </div>\n\n    <!-- Show iframe only if we have an authorization URL -->\n    <div class=\"consent-container\" *ngIf=\"authorizationUrl\">\n      <iframe\n        [src]=\"authorizationUrl\"\n        class=\"consent-iframe\"\n        frameborder=\"0\"\n        allowfullscreen\n        sandbox=\"allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation\">\n      </iframe>\n    </div>\n\n    <!-- Show waiting message when consent is in popup or iframe failed -->\n    <div class=\"consent-waiting\" *ngIf=\"!authorizationUrl\">\n      <mat-spinner diameter=\"40\"></mat-spinner>\n      <p>{{ waitingForAuthorizationText }}</p>\n      <p class=\"consent-popup-hint\">\n        <mat-icon>open_in_new</mat-icon>\n        <span>{{ popupWindowMessage }}</span>\n      </p>\n      <p class=\"consent-popup-note\">\n        {{ popupBlockerMessage }}\n      </p>\n    </div>\n  </div>\n\n  <!-- Processing State -->\n  <div *ngIf=\"isProcessingState\" class=\"state-processing\">\n    <div class=\"loading-container\">\n      <mat-spinner diameter=\"50\"></mat-spinner>\n      <p class=\"loading-message\">{{ waitingMessage }}</p>\n      <div class=\"progress-details\">\n        <p *ngIf=\"accounts.length > 0\">\n          {{ accountsRetrievedLabel }}: {{ accounts.length }}\n        </p>\n        <p *ngIf=\"transactions.length > 0\">\n          {{ transactionsRetrievedLabel }}: {{ transactions.length }}\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error State -->\n  <div *ngIf=\"isErrorState\" class=\"state-error\">\n    <div class=\"error-container\">\n      <mat-icon color=\"warn\" class=\"error-icon\">error_outline</mat-icon>\n      <p class=\"error-message\">{{ errorMessage }}</p>\n      <button mat-raised-button color=\"primary\" (click)=\"retry()\">\n        {{ retryButtonLabel }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Complete State -->\n  <div *ngIf=\"isCompleteState\" class=\"state-complete\">\n    <div class=\"success-container\">\n      <mat-icon color=\"primary\" class=\"success-icon\">check_circle</mat-icon>\n      <p class=\"success-message\">{{ completionMessage }}</p>\n\n      <!-- Display summary of accounts found -->\n      <div class=\"accounts-summary\" *ngIf=\"accounts.length > 0\">\n        <h4>{{ accountsSummaryText }}</h4>\n        <div class=\"accounts-list\">\n          <div class=\"account-card\" *ngFor=\"let account of accounts\">\n            <div class=\"account-header\">\n              <mat-icon class=\"account-icon\">account_balance</mat-icon>\n              <div class=\"account-info\">\n                <div class=\"account-name\">{{ account.name || 'Account' }}</div>\n                <div class=\"account-iban\">{{ account.iban }}</div>\n              </div>\n            </div>\n            <div class=\"account-details\">\n              <div class=\"account-balance\">\n                <span class=\"balance-amount\">{{ account.balance | currency:account.currency:'symbol':'1.2-2' }}</span>\n              </div>\n              <div class=\"account-holder\">{{ account.accountHolderName }}</div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"transaction-summary\" *ngIf=\"transactions.length > 0\">\n          <p>{{ transactionsSummaryText }}</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".open-banking-container{padding:20px;min-height:400px}.open-banking-container .section-title{margin-bottom:20px;font-size:1.25rem;font-weight:500;color:#000000de}.open-banking-container .message-container,.open-banking-container .loading-container,.open-banking-container .error-container,.open-banking-container .success-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:200px}.open-banking-container .message,.open-banking-container .loading-message,.open-banking-container .error-message,.open-banking-container .success-message{font-size:1rem;margin:20px 0;max-width:600px;line-height:1.5}.open-banking-container .error-message{color:#f44336}.open-banking-container .success-message{color:#4caf50}.open-banking-container .error-icon,.open-banking-container .success-icon{font-size:48px;width:48px;height:48px}.open-banking-container .state-bank-selection .banks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}.open-banking-container .state-bank-selection .bank-card{border:2px solid #e0e0e0;border-radius:8px;padding:16px;cursor:pointer;transition:all .3s ease;position:relative;background:#fff;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}.open-banking-container .state-bank-selection .bank-card:hover{border-color:#3f51b5;box-shadow:0 4px 8px #0000001a;transform:translateY(-2px)}.open-banking-container .state-bank-selection .bank-card.selected{border-color:#3f51b5;background:#f5f7ff}.open-banking-container .state-bank-selection .bank-card .bank-logo{width:80px;height:40px;margin-bottom:8px;display:flex;align-items:center;justify-content:center}.open-banking-container .state-bank-selection .bank-card .bank-logo img{max-width:100%;max-height:100%;object-fit:contain}.open-banking-container .state-bank-selection .bank-card .bank-info{text-align:center}.open-banking-container .state-bank-selection .bank-card .bank-info h4{margin:0;font-size:.9rem;font-weight:500;color:#333}.open-banking-container .state-bank-selection .bank-card .bank-info .bank-code{font-size:.75rem;color:#666;margin-top:4px;display:block}.open-banking-container .state-bank-selection .bank-card .check-icon{position:absolute;top:8px;right:8px;color:#3f51b5;font-size:20px}.open-banking-container .state-bank-selection .bank-dropdown{margin:20px 0}.open-banking-container .state-bank-selection .bank-selector{width:100%;max-width:400px}.open-banking-container .state-consent .consent-header{text-align:center;margin-bottom:20px}.open-banking-container .state-consent .consent-header h3{font-size:1.25rem;font-weight:500;margin-bottom:8px}.open-banking-container .state-consent .consent-header p{color:#666;font-size:.95rem}.open-banking-container .state-consent .consent-container{width:100%;height:600px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;background:#fff}.open-banking-container .state-consent .consent-iframe{width:100%;height:100%}.open-banking-container .state-consent .consent-waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px}.open-banking-container .state-consent .consent-waiting p{margin-top:16px;color:#666}.open-banking-container .state-consent .consent-waiting .consent-popup-hint{display:flex;align-items:center;gap:8px;margin-top:24px;font-size:1.1rem;color:#333}.open-banking-container .state-consent .consent-waiting .consent-popup-hint mat-icon{color:#3f51b5}.open-banking-container .state-consent .consent-waiting .consent-popup-note{margin-top:12px;font-size:.9rem;color:#999;font-style:italic}.open-banking-container .progress-details{margin-top:20px}.open-banking-container .progress-details p{font-size:.9rem;color:#666;margin:4px 0}.open-banking-container .accounts-summary{margin-top:30px;width:100%;max-width:800px}.open-banking-container .accounts-summary h4{font-size:1.15rem;font-weight:500;margin-bottom:20px;color:#000000de}.open-banking-container .accounts-summary .accounts-list{display:flex;flex-direction:column;gap:16px}.open-banking-container .accounts-summary .account-card{border:1px solid #e0e0e0;border-radius:8px;padding:16px;background:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease}.open-banking-container .accounts-summary .account-card:hover{box-shadow:0 2px 6px #00000026}.open-banking-container .accounts-summary .account-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.open-banking-container .accounts-summary .account-icon{color:#3f51b5;margin-top:2px}.open-banking-container .accounts-summary .account-info{flex:1}.open-banking-container .accounts-summary .account-name{font-weight:500;font-size:1rem;color:#333;margin-bottom:4px}.open-banking-container .accounts-summary .account-iban{font-size:.85rem;color:#666;font-family:Courier New,monospace;letter-spacing:.5px}.open-banking-container .accounts-summary .account-details{display:flex;justify-content:space-between;align-items:center;padding-left:36px}.open-banking-container .accounts-summary .account-balance{display:flex;flex-direction:column}.open-banking-container .accounts-summary .balance-amount{font-size:1.25rem;font-weight:600;color:#4caf50}.open-banking-container .accounts-summary .account-holder{font-size:.9rem;color:#666;text-align:right}.open-banking-container .accounts-summary .transaction-summary{margin-top:16px;padding:12px;background:#e8f5e9;border-radius:4px}.open-banking-container .accounts-summary .transaction-summary p{margin:0;color:#2e7d32;font-size:.95rem}.open-banking-container ::ng-deep .mat-spinner{margin:0 auto}.open-banking-container ::ng-deep .mat-progress-spinner circle,.open-banking-container ::ng-deep .mat-spinner circle{stroke:#3f51b5}@media (max-width: 768px){.open-banking-container{padding:10px}.open-banking-container .state-bank-selection .banks-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.open-banking-container .state-bank-selection .bank-card{min-height:100px;padding:12px}.open-banking-container .state-bank-selection .bank-card .bank-logo{width:60px;height:30px}.open-banking-container .consent-container{height:500px}.open-banking-container .accounts-summary{max-width:100%}}@media (max-width: 480px){.open-banking-container .state-bank-selection .banks-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyOpenBankingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyOpenBankingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-formly-open-banking', template: "<div class=\"open-banking-container\">\n  <!-- Initial State -->\n  <div *ngIf=\"isInitialState\" class=\"state-initial\">\n    <div class=\"message-container\">\n      <p class=\"message\">{{ initialMessage }}</p>\n      <button mat-raised-button color=\"primary\" (click)=\"proceedToNextStep()\" [disabled]=\"isLoadingSubject | async\">\n        {{ nextButtonLabel }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Bank Selection State -->\n  <div *ngIf=\"isBankSelectionState\" class=\"state-bank-selection\">\n    <h3 class=\"section-title\">{{ selectBankTitle }}</h3>\n\n    <!-- Bank Grid -->\n    <div class=\"banks-grid\" *ngIf=\"banks.length > 0\">\n      <div\n        *ngFor=\"let bank of banks\"\n        class=\"bank-card\"\n        [class.selected]=\"selectedBank === bank.bankCode\"\n        (click)=\"selectBank(bank)\">\n        <div class=\"bank-logo\" *ngIf=\"bank.logoUrl\">\n          <img [src]=\"bank.logoUrl\" [alt]=\"bank.displayName\">\n        </div>\n        <div class=\"bank-info\">\n          <h4>{{ bank.displayName }}</h4>\n          <span class=\"bank-code\">{{ bank.bankCode }}</span>\n        </div>\n        <mat-icon class=\"check-icon\" *ngIf=\"selectedBank === bank.bankCode\">check_circle</mat-icon>\n      </div>\n    </div>\n\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"proceedToNextStep()\"\n      [disabled]=\"!selectedBank || (isLoadingSubject | async)\"\n      class=\"m-t-16\">\n      {{ continueButtonLabel }}\n    </button>\n  </div>\n\n  <!-- Consent State -->\n  <div *ngIf=\"isConsentState\" class=\"state-consent\">\n    <div class=\"consent-header\">\n      <h3>{{ consentTitle }}</h3>\n      <p>{{ consentDescription }}</p>\n    </div>\n\n    <!-- Show iframe only if we have an authorization URL -->\n    <div class=\"consent-container\" *ngIf=\"authorizationUrl\">\n      <iframe\n        [src]=\"authorizationUrl\"\n        class=\"consent-iframe\"\n        frameborder=\"0\"\n        allowfullscreen\n        sandbox=\"allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation\">\n      </iframe>\n    </div>\n\n    <!-- Show waiting message when consent is in popup or iframe failed -->\n    <div class=\"consent-waiting\" *ngIf=\"!authorizationUrl\">\n      <mat-spinner diameter=\"40\"></mat-spinner>\n      <p>{{ waitingForAuthorizationText }}</p>\n      <p class=\"consent-popup-hint\">\n        <mat-icon>open_in_new</mat-icon>\n        <span>{{ popupWindowMessage }}</span>\n      </p>\n      <p class=\"consent-popup-note\">\n        {{ popupBlockerMessage }}\n      </p>\n    </div>\n  </div>\n\n  <!-- Processing State -->\n  <div *ngIf=\"isProcessingState\" class=\"state-processing\">\n    <div class=\"loading-container\">\n      <mat-spinner diameter=\"50\"></mat-spinner>\n      <p class=\"loading-message\">{{ waitingMessage }}</p>\n      <div class=\"progress-details\">\n        <p *ngIf=\"accounts.length > 0\">\n          {{ accountsRetrievedLabel }}: {{ accounts.length }}\n        </p>\n        <p *ngIf=\"transactions.length > 0\">\n          {{ transactionsRetrievedLabel }}: {{ transactions.length }}\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error State -->\n  <div *ngIf=\"isErrorState\" class=\"state-error\">\n    <div class=\"error-container\">\n      <mat-icon color=\"warn\" class=\"error-icon\">error_outline</mat-icon>\n      <p class=\"error-message\">{{ errorMessage }}</p>\n      <button mat-raised-button color=\"primary\" (click)=\"retry()\">\n        {{ retryButtonLabel }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Complete State -->\n  <div *ngIf=\"isCompleteState\" class=\"state-complete\">\n    <div class=\"success-container\">\n      <mat-icon color=\"primary\" class=\"success-icon\">check_circle</mat-icon>\n      <p class=\"success-message\">{{ completionMessage }}</p>\n\n      <!-- Display summary of accounts found -->\n      <div class=\"accounts-summary\" *ngIf=\"accounts.length > 0\">\n        <h4>{{ accountsSummaryText }}</h4>\n        <div class=\"accounts-list\">\n          <div class=\"account-card\" *ngFor=\"let account of accounts\">\n            <div class=\"account-header\">\n              <mat-icon class=\"account-icon\">account_balance</mat-icon>\n              <div class=\"account-info\">\n                <div class=\"account-name\">{{ account.name || 'Account' }}</div>\n                <div class=\"account-iban\">{{ account.iban }}</div>\n              </div>\n            </div>\n            <div class=\"account-details\">\n              <div class=\"account-balance\">\n                <span class=\"balance-amount\">{{ account.balance | currency:account.currency:'symbol':'1.2-2' }}</span>\n              </div>\n              <div class=\"account-holder\">{{ account.accountHolderName }}</div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"transaction-summary\" *ngIf=\"transactions.length > 0\">\n          <p>{{ transactionsSummaryText }}</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".open-banking-container{padding:20px;min-height:400px}.open-banking-container .section-title{margin-bottom:20px;font-size:1.25rem;font-weight:500;color:#000000de}.open-banking-container .message-container,.open-banking-container .loading-container,.open-banking-container .error-container,.open-banking-container .success-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:200px}.open-banking-container .message,.open-banking-container .loading-message,.open-banking-container .error-message,.open-banking-container .success-message{font-size:1rem;margin:20px 0;max-width:600px;line-height:1.5}.open-banking-container .error-message{color:#f44336}.open-banking-container .success-message{color:#4caf50}.open-banking-container .error-icon,.open-banking-container .success-icon{font-size:48px;width:48px;height:48px}.open-banking-container .state-bank-selection .banks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}.open-banking-container .state-bank-selection .bank-card{border:2px solid #e0e0e0;border-radius:8px;padding:16px;cursor:pointer;transition:all .3s ease;position:relative;background:#fff;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}.open-banking-container .state-bank-selection .bank-card:hover{border-color:#3f51b5;box-shadow:0 4px 8px #0000001a;transform:translateY(-2px)}.open-banking-container .state-bank-selection .bank-card.selected{border-color:#3f51b5;background:#f5f7ff}.open-banking-container .state-bank-selection .bank-card .bank-logo{width:80px;height:40px;margin-bottom:8px;display:flex;align-items:center;justify-content:center}.open-banking-container .state-bank-selection .bank-card .bank-logo img{max-width:100%;max-height:100%;object-fit:contain}.open-banking-container .state-bank-selection .bank-card .bank-info{text-align:center}.open-banking-container .state-bank-selection .bank-card .bank-info h4{margin:0;font-size:.9rem;font-weight:500;color:#333}.open-banking-container .state-bank-selection .bank-card .bank-info .bank-code{font-size:.75rem;color:#666;margin-top:4px;display:block}.open-banking-container .state-bank-selection .bank-card .check-icon{position:absolute;top:8px;right:8px;color:#3f51b5;font-size:20px}.open-banking-container .state-bank-selection .bank-dropdown{margin:20px 0}.open-banking-container .state-bank-selection .bank-selector{width:100%;max-width:400px}.open-banking-container .state-consent .consent-header{text-align:center;margin-bottom:20px}.open-banking-container .state-consent .consent-header h3{font-size:1.25rem;font-weight:500;margin-bottom:8px}.open-banking-container .state-consent .consent-header p{color:#666;font-size:.95rem}.open-banking-container .state-consent .consent-container{width:100%;height:600px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;background:#fff}.open-banking-container .state-consent .consent-iframe{width:100%;height:100%}.open-banking-container .state-consent .consent-waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px}.open-banking-container .state-consent .consent-waiting p{margin-top:16px;color:#666}.open-banking-container .state-consent .consent-waiting .consent-popup-hint{display:flex;align-items:center;gap:8px;margin-top:24px;font-size:1.1rem;color:#333}.open-banking-container .state-consent .consent-waiting .consent-popup-hint mat-icon{color:#3f51b5}.open-banking-container .state-consent .consent-waiting .consent-popup-note{margin-top:12px;font-size:.9rem;color:#999;font-style:italic}.open-banking-container .progress-details{margin-top:20px}.open-banking-container .progress-details p{font-size:.9rem;color:#666;margin:4px 0}.open-banking-container .accounts-summary{margin-top:30px;width:100%;max-width:800px}.open-banking-container .accounts-summary h4{font-size:1.15rem;font-weight:500;margin-bottom:20px;color:#000000de}.open-banking-container .accounts-summary .accounts-list{display:flex;flex-direction:column;gap:16px}.open-banking-container .accounts-summary .account-card{border:1px solid #e0e0e0;border-radius:8px;padding:16px;background:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease}.open-banking-container .accounts-summary .account-card:hover{box-shadow:0 2px 6px #00000026}.open-banking-container .accounts-summary .account-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.open-banking-container .accounts-summary .account-icon{color:#3f51b5;margin-top:2px}.open-banking-container .accounts-summary .account-info{flex:1}.open-banking-container .accounts-summary .account-name{font-weight:500;font-size:1rem;color:#333;margin-bottom:4px}.open-banking-container .accounts-summary .account-iban{font-size:.85rem;color:#666;font-family:Courier New,monospace;letter-spacing:.5px}.open-banking-container .accounts-summary .account-details{display:flex;justify-content:space-between;align-items:center;padding-left:36px}.open-banking-container .accounts-summary .account-balance{display:flex;flex-direction:column}.open-banking-container .accounts-summary .balance-amount{font-size:1.25rem;font-weight:600;color:#4caf50}.open-banking-container .accounts-summary .account-holder{font-size:.9rem;color:#666;text-align:right}.open-banking-container .accounts-summary .transaction-summary{margin-top:16px;padding:12px;background:#e8f5e9;border-radius:4px}.open-banking-container .accounts-summary .transaction-summary p{margin:0;color:#2e7d32;font-size:.95rem}.open-banking-container ::ng-deep .mat-spinner{margin:0 auto}.open-banking-container ::ng-deep .mat-progress-spinner circle,.open-banking-container ::ng-deep .mat-spinner circle{stroke:#3f51b5}@media (max-width: 768px){.open-banking-container{padding:10px}.open-banking-container .state-bank-selection .banks-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.open-banking-container .state-bank-selection .bank-card{min-height:100px;padding:12px}.open-banking-container .state-bank-selection .bank-card .bank-logo{width:60px;height:30px}.open-banking-container .consent-container{height:500px}.open-banking-container .accounts-summary{max-width:100%}}@media (max-width: 480px){.open-banking-container .state-bank-selection .banks-grid{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [{ type: i1.OpenBankingService }, { type: i2.DialogService }, { type: i3.DomSanitizer }, { type: i0.ChangeDetectorRef }] });