turbogui-angular 20.7.0 → 20.9.0

package/fesm2022/turbogui-angular.mjs

@@ -32,25 +32,27 @@ import { FormsModule, Validators, FormControl } from '@angular/forms';
  * License Url : -> http://www.apache.org/licenses/LICENSE-2.0
  * CopyRight : -> Copyright 2018 Edertone Advanded Solutions. https://www.edertone.com
  */
-/** This directive is used to trigger an event when the user clicks outside of an element */
 /**
+ * It is necessary to import TurboGuiAngularModule at the component that uses this directive
+ *
  * This directive is used to execute an action when the user clicks outside of an element.
- * If we set the elementClickOutside tag to the html element and set the onClickOutside event to a function: <element elementClickOutside (onClickOutside)="onClickedOutside()" ...,
+ *
+ * If we set the elementClickOutside tag to the html element and set the clickOutsideElement event to a function: <element elementClickOutside (clickOutsideElement)="clickOutsideElement()" ...,
  * this function will be executed when the user clicks outside of the element.
  */
 class ElementClickOutsideDirective {
     constructor(elementRef) {
         this.elementRef = elementRef;
-        this.onClickOutside = new EventEmitter();
+        this.clickOutsideElement = new EventEmitter();
     }
     onClick(targetElement) {
         const clickedInside = this.elementRef.nativeElement.contains(targetElement);
         if (!clickedInside) {
-            this.onClickOutside.emit();
+            this.clickOutsideElement.emit();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ElementClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: ElementClickOutsideDirective, isStandalone: false, selector: "[elementClickOutside]", outputs: { onClickOutside: "onClickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: ElementClickOutsideDirective, isStandalone: false, selector: "[elementClickOutside]", outputs: { clickOutsideElement: "clickOutsideElement" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ElementClickOutsideDirective, decorators: [{
             type: Directive,
@@ -58,7 +60,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     selector: '[elementClickOutside]',
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onClickOutside: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { clickOutsideElement: [{
                 type: Output
             }], onClick: [{
                 type: HostListener,
@@ -102,8 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     standalone: false
                 }]
         }], propDecorators: { elementCreated: [{
-                type: Output,
-                args: ['elementCreated']
+                type: Output
             }] } });
 
 /**
@@ -143,8 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     standalone: false
                 }]
         }], propDecorators: { elementDestroyed: [{
-                type: Output,
-                args: ['elementDestroyed']
+                type: Output
             }] } });
 
 /**
@@ -1075,6 +1075,130 @@ class DialogService extends SingletoneStrictClass {
             });
         });
     }
+    /**
+     * Shows a native OS file browser dialog to let the user select a single file from their local file system.
+     *
+     * @param options An object containing options for the file browser dialog:
+     *   - accept: A string that defines the file types the file input should accept. For example: '.csv,.xlsx', 'image/*', '.pdf', 'image/jpeg, image/png'.
+     *   - maxFileSize: (Optional) The maximum file size in bytes allowed for the selected file. If the selected file exceeds this size, the promise will be rejected with an error
+     *   - loadData: (Optional) Defines how the file content should be read and returned.
+     *             'no' (default): Returns the raw File object without its data.
+     *             'ArrayBuffer': Returns the File object with its content read as a raw binary `ArrayBuffer` in the `data` property.
+     *             'text': Returns the File object with its content read as a text string in the `data` property.
+     *             'base64': Returns the File object with its content read as a Base64 encoded string in the `data` property.
+     *
+     * @returns A Promise that resolves with the selected `File` object (which may have an added `data` property), or `null` if the user cancels the dialog.
+     *          The promise will be rejected with an Error if the selected file exceeds the specified size limits.
+     */
+    async addFileBrowserDialog(options) {
+        const files = await this._addFileBrowserDialogInternal({
+            multiple: false,
+            accept: options.accept,
+            maxFileSize: options.maxFileSize,
+            loadData: options.loadData
+        });
+        return files ? files[0] : null;
+    }
+    /**
+     * Shows a native OS file browser dialog to let the user select one or more files from their local file system.
+     *
+     * @param options An object containing options for the file browser dialog:
+     *   - accept: A string that defines the file types the file input should accept. For example: '.csv,.xlsx', 'image/*', '.pdf', 'image/jpeg, image/png'.
+     *   - maxFileSize: (Optional) The maximum file size in bytes allowed for any single selected file. If a selected file exceeds this size, the promise will be rejected with an error.
+     *   - maxTotalSize: (Optional) The maximum total size in bytes for all selected files combined. If the total size of all files exceeds this limit, the promise will be rejected with an error.
+     *   - loadData: (Optional) Defines how the file content should be read and returned.
+     *             'no' (default): Returns an array of `File` objects without their data.
+     *             'ArrayBuffer': Returns an array of `File` objects, each with its content read as a raw binary `ArrayBuffer` in the `data` property.
+     *             'text': Returns an array of `File` objects, each with its content read as a text string in the `data` property.
+     *             'base64': Returns an array of `File` objects, each with its content read as a Base64 encoded string in the `data` property.
+     *
+     * @returns A Promise that resolves with an array of `File` objects (which may have an added `data` property), or `null` if the user cancels the dialog.
+     *          The promise will be rejected with an Error if the selected files exceed the specified size limits.
+     */
+    addFilesBrowserDialog(options) {
+        return this._addFileBrowserDialogInternal({
+            multiple: true,
+            accept: options.accept,
+            maxFileSize: options.maxFileSize,
+            maxTotalSize: options.maxTotalSize,
+            loadData: options.loadData
+        });
+    }
+    /**
+     * Auxiliary method that combines the logic for addFileBrowserDialog and addFilesBrowserDialog
+     */
+    async _addFileBrowserDialogInternal(options) {
+        if (!this._isEnabled) {
+            return null;
+        }
+        // Create a hidden input element to show the file browser dialog
+        const input = this._renderer.createElement('input');
+        this._renderer.setAttribute(input, 'type', 'file');
+        this._renderer.setAttribute(input, 'accept', options.accept);
+        this._renderer.setAttribute(input, 'id', 'turbogui-file-browser-input-hidden-dialog');
+        if (options.multiple) {
+            this._renderer.setAttribute(input, 'multiple', 'true');
+        }
+        this._renderer.setStyle(input, 'display', 'none');
+        this._renderer.appendChild(document.body, input);
+        try {
+            const files = await new Promise((resolve) => {
+                const onFocus = () => {
+                    setTimeout(() => {
+                        if (!input.files || input.files.length === 0) {
+                            resolve(null);
+                        }
+                    }, 600);
+                };
+                const onChange = (event) => {
+                    const fileList = event.target.files;
+                    resolve(fileList ? Array.from(fileList) : null);
+                };
+                this._renderer.listen(input, 'change', onChange);
+                window.addEventListener('focus', onFocus, { once: true });
+                input.click();
+            });
+            if (!files || files.length === 0) {
+                return null;
+            }
+            let totalSize = 0;
+            for (const file of files) {
+                if (options.maxFileSize !== undefined && file.size > options.maxFileSize) {
+                    throw new Error(`Max file size exceeded: "${file.name}" exceeds ${options.maxFileSize} bytes`);
+                }
+                totalSize += file.size;
+            }
+            if (options.maxTotalSize !== undefined && totalSize > options.maxTotalSize) {
+                throw new Error(`Max total size exceeded: ${options.maxTotalSize} bytes`);
+            }
+            if (!options.loadData || options.loadData === 'no') {
+                return files;
+            }
+            const fileReadPromises = files.map(async (file) => {
+                switch (options.loadData) {
+                    case 'ArrayBuffer':
+                        file.data = await file.arrayBuffer();
+                        break;
+                    case 'text':
+                        file.data = await file.text();
+                        break;
+                    case 'base64':
+                        file.data = await new Promise((resolve, reject) => {
+                            const reader = new FileReader();
+                            reader.onload = () => resolve(reader.result.split(',')[1]);
+                            reader.onerror = () => reject(reader.error ?? new Error('Unknown FileReader error'));
+                            reader.readAsDataURL(file);
+                        });
+                        break;
+                }
+                return file;
+            });
+            return await Promise.all(fileReadPromises);
+        }
+        finally {
+            this._renderer.removeChild(document.body, input);
+        }
+    }
     /**
      * Show a dialog with an iframe inside it, to show external web pages or web applications.
      *
@@ -2833,11 +2957,11 @@ class DialogSingleSelectionListComponent extends DialogBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogSingleSelectionListComponent, deps: [{ token: i0.ElementRef }, { token: i1.MatDialogRef }, { token: BrowserService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogSingleSelectionListComponent, isStandalone: true, selector: "tg-dialog-single-selection-list", providers: [], usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<!-- Here goes the dialog subtitle. Leave it blank if you don't need it -->\r\n<p *ngIf=\"data.texts.length > 1 &amp;&amp; !stringUtils.isEmpty(data.texts[1])\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<mat-form-field *ngIf=\"data.texts.length > 2 &amp;&amp; !stringUtils.isEmpty(data.texts[2])\"\r\n    class=\"searchItemInputContainer\">\r\n    \r\n    <mat-label>{{data.texts[2]}}</mat-label>\r\n    <input matInput autoFocusOnDisplay\r\n        (keyup.enter)=\"onIntroKeyPress()\"\r\n        (input)=\"onSearchChange($event.target)\">\r\n        \r\n</mat-form-field>\r\n\r\n<!-- here goes the list of elements that will be shown to the user -->\r\n<div class=\"listItemsContainer\"\r\n    [style.max-height]=\"getListItemsContainerMaxheight()\">\r\n\r\n    <div class=\"listItemContainer\"\r\n        [style.background-color]=\"selectedItemIndex === i ? '#90d1ffad' : (i % 2 === 0 ? 'initial' : '#00000009')\"\r\n        *ngFor=\"let item of filteredOptions; let i = index; trackBy: trackByFn\"\r\n        (click)=\"data.texts.length < 4 ? closeDialog(i) : selectedItemIndex = i\">\r\n    \r\n        <p *ngIf=\"item !== ''\">\r\n            {{item}}\r\n        </p>\r\n    \r\n    </div>\r\n\r\n</div>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    [disabled]=\"selectedItemIndex < 0\"\r\n    (click)=\"closeDialog(selectedItemIndex)\"\r\n    *ngIf=\"data.texts.length > 3\">\r\n\r\n    {{data.texts[3]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-top:0;margin-bottom:10px}p{margin-top:0;margin-bottom:5px}.searchItemInputContainer{width:100%;margin-top:0;margin-bottom:0}.listItemsContainer{overflow-y:auto;border:1px solid rgba(0,0,0,.2);border-radius:4px;margin-bottom:5px}.listItemContainer p{line-height:36px;width:calc(100% - 12px);margin:0 0 0 6px;cursor:pointer}button{float:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: TurboGuiAngularModule }, { kind: "directive", type: AutoFocusOnDisplayDirective, selector: "[autoFocusOnDisplay]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogSingleSelectionListComponent, isStandalone: true, selector: "tg-dialog-single-selection-list", providers: [], usesInheritance: true, ngImport: i0, template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<!-- Here goes the dialog subtitle. Leave it blank if you don't need it -->\r\n<p *ngIf=\"data.texts.length > 1 &amp;&amp; !stringUtils.isEmpty(data.texts[1])\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<mat-form-field *ngIf=\"data.texts.length > 2 &amp;&amp; !stringUtils.isEmpty(data.texts[2])\"\r\n    class=\"searchItemInputContainer\">\r\n    \r\n    <mat-label>{{data.texts[2]}}</mat-label>\r\n    <input matInput autoFocusOnDisplay\r\n        (keyup.enter)=\"onIntroKeyPress()\"\r\n        (input)=\"onSearchChange($event.target)\">\r\n        \r\n</mat-form-field>\r\n\r\n<!-- here goes the list of elements that will be shown to the user -->\r\n<div class=\"listItemsContainer\"\r\n    [style.max-height]=\"getListItemsContainerMaxheight()\">\r\n\r\n    <div class=\"listItemContainer\"\r\n        [style.background-color]=\"selectedItemIndex === i ? '#90d1ffad' : (i % 2 === 0 ? 'initial' : '#00000009')\"\r\n        *ngFor=\"let item of filteredOptions; let i = index; trackBy: trackByFn\"\r\n        (click)=\"data.texts.length < 4 ? closeDialog(i) : selectedItemIndex = i\">\r\n    \r\n        <p *ngIf=\"item !== ''\">\r\n            {{item}}\r\n        </p>\r\n    \r\n    </div>\r\n\r\n</div>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    [disabled]=\"selectedItemIndex < 0\"\r\n    (click)=\"closeDialog(selectedItemIndex)\"\r\n    *ngIf=\"data.texts.length > 3\">\r\n\r\n    {{data.texts[3]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-top:0;margin-bottom:10px}p{margin-top:0;margin-bottom:5px}.searchItemInputContainer{width:100%;margin-top:0;margin-bottom:0}.listItemsContainer{overflow-y:auto;border:1px solid rgba(0,0,0,.2);border-radius:4px;margin-bottom:5px;cursor:pointer}.listItemContainer p{line-height:36px;width:calc(100% - 12px);margin:0 0 0 6px}button{float:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: TurboGuiAngularModule }, { kind: "directive", type: AutoFocusOnDisplayDirective, selector: "[autoFocusOnDisplay]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogSingleSelectionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tg-dialog-single-selection-list', imports: [CommonModule, MatInputModule, MatFormFieldModule, TurboGuiAngularModule], providers: [], template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<!-- Here goes the dialog subtitle. Leave it blank if you don't need it -->\r\n<p *ngIf=\"data.texts.length > 1 &amp;&amp; !stringUtils.isEmpty(data.texts[1])\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<mat-form-field *ngIf=\"data.texts.length > 2 &amp;&amp; !stringUtils.isEmpty(data.texts[2])\"\r\n    class=\"searchItemInputContainer\">\r\n    \r\n    <mat-label>{{data.texts[2]}}</mat-label>\r\n    <input matInput autoFocusOnDisplay\r\n        (keyup.enter)=\"onIntroKeyPress()\"\r\n        (input)=\"onSearchChange($event.target)\">\r\n        \r\n</mat-form-field>\r\n\r\n<!-- here goes the list of elements that will be shown to the user -->\r\n<div class=\"listItemsContainer\"\r\n    [style.max-height]=\"getListItemsContainerMaxheight()\">\r\n\r\n    <div class=\"listItemContainer\"\r\n        [style.background-color]=\"selectedItemIndex === i ? '#90d1ffad' : (i % 2 === 0 ? 'initial' : '#00000009')\"\r\n        *ngFor=\"let item of filteredOptions; let i = index; trackBy: trackByFn\"\r\n        (click)=\"data.texts.length < 4 ? closeDialog(i) : selectedItemIndex = i\">\r\n    \r\n        <p *ngIf=\"item !== ''\">\r\n            {{item}}\r\n        </p>\r\n    \r\n    </div>\r\n\r\n</div>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    [disabled]=\"selectedItemIndex < 0\"\r\n    (click)=\"closeDialog(selectedItemIndex)\"\r\n    *ngIf=\"data.texts.length > 3\">\r\n\r\n    {{data.texts[3]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-top:0;margin-bottom:10px}p{margin-top:0;margin-bottom:5px}.searchItemInputContainer{width:100%;margin-top:0;margin-bottom:0}.listItemsContainer{overflow-y:auto;border:1px solid rgba(0,0,0,.2);border-radius:4px;margin-bottom:5px}.listItemContainer p{line-height:36px;width:calc(100% - 12px);margin:0 0 0 6px;cursor:pointer}button{float:right}\n"] }]
+            args: [{ selector: 'tg-dialog-single-selection-list', imports: [CommonModule, MatInputModule, MatFormFieldModule, TurboGuiAngularModule], providers: [], template: "<h3>\r\n    {{data.texts[0]}}\r\n</h3>\r\n\r\n<!-- Here goes the dialog subtitle. Leave it blank if you don't need it -->\r\n<p *ngIf=\"data.texts.length > 1 &amp;&amp; !stringUtils.isEmpty(data.texts[1])\">\r\n    {{data.texts[1]}}\r\n</p>\r\n\r\n<mat-form-field *ngIf=\"data.texts.length > 2 &amp;&amp; !stringUtils.isEmpty(data.texts[2])\"\r\n    class=\"searchItemInputContainer\">\r\n    \r\n    <mat-label>{{data.texts[2]}}</mat-label>\r\n    <input matInput autoFocusOnDisplay\r\n        (keyup.enter)=\"onIntroKeyPress()\"\r\n        (input)=\"onSearchChange($event.target)\">\r\n        \r\n</mat-form-field>\r\n\r\n<!-- here goes the list of elements that will be shown to the user -->\r\n<div class=\"listItemsContainer\"\r\n    [style.max-height]=\"getListItemsContainerMaxheight()\">\r\n\r\n    <div class=\"listItemContainer\"\r\n        [style.background-color]=\"selectedItemIndex === i ? '#90d1ffad' : (i % 2 === 0 ? 'initial' : '#00000009')\"\r\n        *ngFor=\"let item of filteredOptions; let i = index; trackBy: trackByFn\"\r\n        (click)=\"data.texts.length < 4 ? closeDialog(i) : selectedItemIndex = i\">\r\n    \r\n        <p *ngIf=\"item !== ''\">\r\n            {{item}}\r\n        </p>\r\n    \r\n    </div>\r\n\r\n</div>\r\n\r\n<button mat-raised-button color=\"primary\"\r\n    [disabled]=\"selectedItemIndex < 0\"\r\n    (click)=\"closeDialog(selectedItemIndex)\"\r\n    *ngIf=\"data.texts.length > 3\">\r\n\r\n    {{data.texts[3]}}\r\n    \r\n</button>", styles: [":host{min-height:300px}h3{margin-top:0;margin-bottom:10px}p{margin-top:0;margin-bottom:5px}.searchItemInputContainer{width:100%;margin-top:0;margin-bottom:0}.listItemsContainer{overflow-y:auto;border:1px solid rgba(0,0,0,.2);border-radius:4px;margin-bottom:5px;cursor:pointer}.listItemContainer p{line-height:36px;width:calc(100% - 12px);margin:0 0 0 6px}button{float:right}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatDialogRef }, { type: BrowserService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -3343,11 +3467,11 @@ class ValidatorsPlus extends Validators {
         }
         // first check if the control has a value
         if (control.value && control.value.length > 0) {
-            if (!StringUtils.isEmpty(control.value)) {
-                return null;
+            if (StringUtils.isEmpty(control.value)) {
+                return { isEmpty: true };
             }
             else {
-                return { isEmpty: true };
+                return null;
             }
         }
         else {
@@ -3376,6 +3500,34 @@ class ValidatorsPlus extends Validators {
             return hasValue ? null : { atLeastOneRequired: true };
         };
     }
+    /**
+     * Validator to check that a control value is a valid mobile phone number with country code.
+     *
+     * The expected format is: +<country code><number>, where:
+     *    - <country code> is 1 to 3 digits
+     *    - <number> is 6 to 14 digits
+     *
+     * The country code must be prefixed with a plus sign (+). Spaces, dots (.), and hyphens (-) are allowed as separators.
+     *
+     * Examples of valid formats:
+     * - +1 1234567890
+     * - +44-1234-567890
+     * - +91.9876543210
+     *
+     * Examples of invalid formats:
+     * - 1234567890 (missing country code)
+     * - +123 (too short)
+     * - +123456789012345671 (too long)
+     *
+     * @param control The form control to validate.
+     *
+     * @returns An object with the validation error if invalid, or null if valid.
+     */
+    static mobilePhoneWithCountryCode(control) {
+        const mobilePhoneRegex = /^\+\d{1,3}[\s.-]?\d{6,14}$/;
+        const valid = mobilePhoneRegex.test(control.value);
+        return valid ? null : { mobilePhoneWithCountryCode: true };
+    }
 }
 
 /*