turbogui-angular 20.7.0 → 20.8.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
             }] } });
 
 /**
@@ -2833,11 +2833,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 +3343,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 +3376,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 };
+    }
 }
 
 /*