@valtimo/components 11.2.1 → 11.3.0

package/fesm2022/valtimo-components.mjs

@@ -9,7 +9,7 @@ import { VERSIONS, HttpLoaderFactory, UrlUtils, ConfigService } from '@valtimo/c
 import * as i1$2 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { Validators, UntypedFormControl, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
+import { Validators, UntypedFormControl, ReactiveFormsModule, FormControl, FormsModule, FormGroup } from '@angular/forms';
 import moment from 'moment';
 import * as i1$3 from '@valtimo/choicefield';
 import User20 from '@carbon/icons/es/user/20';
@@ -5968,6 +5968,8 @@ class FormioComponent {
         this._FORMIO_TOKEN_LOCAL_STORAGE_KEY = 'formioToken';
     }
     ngOnInit() {
+        Formio.setProjectUrl(location.origin);
+        Formio.authUrl = location.origin;
         this.openRouteSubscription();
         this.errors$.next([]);
         this.setInitialToken();
@@ -6029,6 +6031,7 @@ class FormioComponent {
         });
     }
     setToken(token) {
+        Formio.setUser(jwt_decode(token));
         Formio.setToken(token);
         localStorage.setItem(this._FORMIO_TOKEN_LOCAL_STORAGE_KEY, token);
         this.setTimerForTokenRefresh(token);
@@ -9268,6 +9271,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Custom iban validator for angular forms.
+ * Checks if the iban is valid.
+ * First move the first four chracters from the beginngin to the end of the string.
+ * Change the letter to a numeric representation.
+ * Calculate the modulo in a parts, because javascript cannot accuratly calculate the modulus for large numbers.
+ *
+ * @returns Null if the iban is valid or the value is an empty string, else return an object with isIbanValid property.
+ */
+function ibanValidator() {
+    return (control) => {
+        const valueString = String(control.value);
+        if (valueString.match(/^$/)) {
+            return null;
+        }
+        const rearranged = valueString.substring(4, valueString.length) + valueString.substring(0, 4);
+        const numeric = Array.from(rearranged)
+            .map(c => (isNaN(parseInt(c, 10)) ? (c.charCodeAt(0) - 55).toString() : c))
+            .join('');
+        const isValidIban = Array.from(numeric)
+            .map(c => parseInt(c, 10))
+            .reduce((remainder, value) => (remainder * 10 + value) % 97, 0);
+        return isValidIban === 1 ? null : { isIbanValid: 'IBAN voldoet niet' };
+    };
+}
+
+/**
+ * Custom formio component for iban bank accounts.
+ */
+class FormIoIbanComponent {
+    constructor() {
+        this.disabled = false;
+        this.required = false;
+        this.valueChange = new EventEmitter();
+        this.ibanForm = new FormGroup({
+            iban: new FormControl(''),
+        });
+        this._subscriptions = new Subscription();
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.ibanForm.controls.iban.setValue(this.value);
+            this.ibanForm.controls.iban.setValidators(this.required ? [Validators.required, ibanValidator()] : [ibanValidator()]);
+            this.ibanForm.controls.iban.updateValueAndValidity();
+            if (this.disabled) {
+                Object.keys(this.ibanForm.controls).forEach(key => {
+                    this.ibanForm?.get(key)?.disable();
+                });
+            }
+            this._subscriptions.add(this.ibanForm.valueChanges.subscribe(() => {
+                this.onValueChange();
+            }));
+        });
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    onValueChange() {
+        this.value = this.ibanForm.valid
+            ? this.ibanForm.controls.iban.value
+            : [this.ibanForm.value];
+        this.valueChange.emit(this.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormIoIbanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormIoIbanComponent, selector: "valtimo-iban", inputs: { value: "value", disabled: "disabled", required: "required" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"ibanForm-container\" [formGroup]=\"ibanForm\">\n  <div class=\"input-group\">\n    <input cdsText id=\"iban\" type=\"text\" formControlName=\"iban\" class=\"form-control\" />\n\n    <div\n      class=\"formio-errors invalid-feedback\"\n      *ngIf=\"\n        ibanForm.controls.iban.invalid &&\n        (ibanForm.controls.iban.touched || !ibanForm.controls.iban.pristine) &&\n        ibanForm.controls?.iban?.errors\n      \"\n    >\n      <div class=\"form-text error\">\n        {{ 'formioTranslations.formioIbanComponent.errorMessage' | translate }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".ibanForm-container{display:flex;flex-direction:column;gap:10px}.ibanForm-row{display:flex;gap:10px}.input-group{display:flex;flex-direction:column;width:100%}.form-control{width:100%}::ng-deep .formio-component-iban .formio-errors[ref=messageContainer]{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormIoIbanComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-iban', template: "<div class=\"ibanForm-container\" [formGroup]=\"ibanForm\">\n  <div class=\"input-group\">\n    <input cdsText id=\"iban\" type=\"text\" formControlName=\"iban\" class=\"form-control\" />\n\n    <div\n      class=\"formio-errors invalid-feedback\"\n      *ngIf=\"\n        ibanForm.controls.iban.invalid &&\n        (ibanForm.controls.iban.touched || !ibanForm.controls.iban.pristine) &&\n        ibanForm.controls?.iban?.errors\n      \"\n    >\n      <div class=\"form-text error\">\n        {{ 'formioTranslations.formioIbanComponent.errorMessage' | translate }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".ibanForm-container{display:flex;flex-direction:column;gap:10px}.ibanForm-row{display:flex;gap:10px}.input-group{display:flex;flex-direction:column;width:100%}.form-control{width:100%}::ng-deep .formio-component-iban .formio-errors[ref=messageContainer]{display:none!important}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
  *
@@ -9289,7 +9371,8 @@ class FormIoModule {
             FormioBuilderComponent,
             FormIoUploaderComponent,
             DocumentenApiUploaderComponent,
-            FormIoCurrentUserComponent], imports: [CommonModule,
+            FormIoCurrentUserComponent,
+            FormIoIbanComponent], imports: [CommonModule,
             FormioModule,
             DropzoneModule,
             TranslateModule,
@@ -9297,11 +9380,13 @@ class FormIoModule {
             FileSizeModule,
             ResourceModule,
             RouterModule,
-            DocumentenApiMetadataModalModule], exports: [FormioComponent,
+            DocumentenApiMetadataModalModule,
+            ReactiveFormsModule], exports: [FormioComponent,
             FormioBuilderComponent,
             FormIoUploaderComponent,
             DocumentenApiUploaderComponent,
-            FormIoCurrentUserComponent] }); }
+            FormIoCurrentUserComponent,
+            FormIoIbanComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormIoModule, providers: [
             FormIoDomService,
             {
@@ -9317,7 +9402,8 @@ class FormIoModule {
             FileSizeModule,
             ResourceModule,
             RouterModule,
-            DocumentenApiMetadataModalModule] }); }
+            DocumentenApiMetadataModalModule,
+            ReactiveFormsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormIoModule, decorators: [{
             type: NgModule,
@@ -9332,6 +9418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ResourceModule,
                         RouterModule,
                         DocumentenApiMetadataModalModule,
+                        ReactiveFormsModule,
                     ],
                     declarations: [
                         FormioComponent,
@@ -9339,6 +9426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormIoUploaderComponent,
                         DocumentenApiUploaderComponent,
                         FormIoCurrentUserComponent,
+                        FormIoIbanComponent,
                     ],
                     exports: [
                         FormioComponent,
@@ -9346,6 +9434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormIoUploaderComponent,
                         DocumentenApiUploaderComponent,
                         FormIoCurrentUserComponent,
+                        FormIoIbanComponent,
                     ],
                     providers: [
                         FormIoDomService,
@@ -9899,7 +9988,7 @@ const formIoUploaderEditForm = () => ({
  * limitations under the License.
  */
 const customUploaderType = 'valtimo-file';
-const COMPONENT_OPTIONS$2 = {
+const COMPONENT_OPTIONS$3 = {
     type: customUploaderType,
     selector: 'valtimo-form-io-uploader',
     title: 'Valtimo File Upload',
@@ -9910,7 +9999,7 @@ const COMPONENT_OPTIONS$2 = {
     editForm: formIoUploaderEditForm,
 };
 function registerFormioUploadComponent(injector) {
-    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS$2);
+    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS$3);
     // override setValue function to allow for setting an array value
     class UploaderComponent extends originalUploadComponent {
         setValue(value) {
@@ -9924,8 +10013,8 @@ function registerFormioUploadComponent(injector) {
             return true;
         }
     }
-    if (!customElements.get(COMPONENT_OPTIONS$2.selector)) {
-        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS$2, FormIoUploaderComponent, UploaderComponent, injector);
+    if (!customElements.get(COMPONENT_OPTIONS$3.selector)) {
+        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS$3, FormIoUploaderComponent, UploaderComponent, injector);
     }
 }
 
@@ -10250,7 +10339,7 @@ const documentenApiUploaderEditForm = () => ({
  * limitations under the License.
  */
 const customDocumentApiUploaderType = 'documenten-api-file';
-const COMPONENT_OPTIONS$1 = {
+const COMPONENT_OPTIONS$2 = {
     type: customDocumentApiUploaderType,
     selector: 'documenten-api-form-io-uploader',
     title: 'Documenten API File Upload',
@@ -10261,7 +10350,7 @@ const COMPONENT_OPTIONS$1 = {
     editForm: documentenApiUploaderEditForm,
 };
 function registerDocumentenApiFormioUploadComponent(injector) {
-    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS$1);
+    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS$2);
     // override setValue function to allow for setting an array value
     class UploaderComponent extends originalUploadComponent {
         setValue(value) {
@@ -10272,8 +10361,8 @@ function registerDocumentenApiFormioUploadComponent(injector) {
             return true;
         }
     }
-    if (!customElements.get(COMPONENT_OPTIONS$1.selector)) {
-        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS$1, DocumentenApiUploaderComponent, UploaderComponent, injector);
+    if (!customElements.get(COMPONENT_OPTIONS$2.selector)) {
+        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS$2, DocumentenApiUploaderComponent, UploaderComponent, injector);
     }
 }
 
@@ -10356,7 +10445,7 @@ const formIoCurrentUserEditForm = () => ({
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const COMPONENT_OPTIONS = {
+const COMPONENT_OPTIONS$1 = {
     type: 'valtimo-current-user',
     selector: 'valtimo-form-io-current-user',
     title: 'Valtimo Current User',
@@ -10369,7 +10458,27 @@ const COMPONENT_OPTIONS = {
     },
 };
 function registerFormioCurrentUserComponent(injector) {
-    registerCustomFormioComponent(COMPONENT_OPTIONS, FormIoCurrentUserComponent, injector);
+    registerCustomFormioComponent(COMPONENT_OPTIONS$1, FormIoCurrentUserComponent, injector);
+}
+
+const COMPONENT_OPTIONS = {
+    type: 'iban',
+    selector: 'valtimo-iban',
+    title: 'Iban',
+    group: 'basic',
+    icon: 'bank',
+    schema: {
+        label: 'Iban component',
+        key: 'iban',
+        hideLabel: false,
+        tableView: true,
+        validate: {
+            required: true,
+        },
+    },
+};
+function registerFormioIbanComponent(injector) {
+    registerCustomFormioComponent(COMPONENT_OPTIONS, FormIoIbanComponent, injector);
 }
 
 /*
@@ -12786,5 +12895,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, ButtonComponent, ButtonModule, CARBON_CONSTANTS, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CardComponent, CardModule, CaseCountPipe, CommandClickDirectiveModule, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, CtrlClickDirective, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DigitOnlyDirective, DocumentenApiMetadataModalComponent, DocumentenApiMetadataModalModule, DocumentenApiUploaderComponent, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FormComponent, FormIoCurrentUserComponent, FormIoModule, FormIoStateService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioOptionsImpl, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, PageContainerComponent, PageContentComponent, PageHeaderActionsComponent, PageHeaderComponent, PageHeaderIntroductionComponent, PageHeaderModule, PageModule, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, RadioComponent, RadioModule, RenderInPageHeaderDirective, RenderInPageHeaderDirectiveModule, RightSidebarComponent, RightSidebarModule, SearchFieldsComponent, SearchFieldsModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SelectComponent$1 as SelectComponent, SelectModule, ShellService, SpinnerComponent, SpinnerModule, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TitleComponent, TitleModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VCardComponent, VCardModule, VModalComponent, VModalModule, VPageHeaderComponent, ValtimoCdsModalDirective, ValtimoCdsModalDirectiveModule, ValtimoCdsOverflowButtonDirective, ValtimoCdsOverflowButtonDirectiveModule, ValtimoModalService, ViewContentService, ViewType, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customDocumentApiUploaderType, customUploaderType, menuInitializer, pendingChangesGuard, registerDocumentenApiFormioUploadComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioUploadComponent };
+export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, ButtonComponent, ButtonModule, CARBON_CONSTANTS, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CardComponent, CardModule, CaseCountPipe, CommandClickDirectiveModule, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, CtrlClickDirective, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DigitOnlyDirective, DocumentenApiMetadataModalComponent, DocumentenApiMetadataModalModule, DocumentenApiUploaderComponent, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FormComponent, FormIoCurrentUserComponent, FormIoIbanComponent, FormIoModule, FormIoStateService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioOptionsImpl, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, PageContainerComponent, PageContentComponent, PageHeaderActionsComponent, PageHeaderComponent, PageHeaderIntroductionComponent, PageHeaderModule, PageModule, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, RadioComponent, RadioModule, RenderInPageHeaderDirective, RenderInPageHeaderDirectiveModule, RightSidebarComponent, RightSidebarModule, SearchFieldsComponent, SearchFieldsModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SelectComponent$1 as SelectComponent, SelectModule, ShellService, SpinnerComponent, SpinnerModule, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TitleComponent, TitleModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VCardComponent, VCardModule, VModalComponent, VModalModule, VPageHeaderComponent, ValtimoCdsModalDirective, ValtimoCdsModalDirectiveModule, ValtimoCdsOverflowButtonDirective, ValtimoCdsOverflowButtonDirectiveModule, ValtimoModalService, ViewContentService, ViewType, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customDocumentApiUploaderType, customUploaderType, menuInitializer, pendingChangesGuard, registerDocumentenApiFormioUploadComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioUploadComponent };
 //# sourceMappingURL=valtimo-components.mjs.map