i-tech-shared-components 1.4.33 → 1.4.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/i-tech-shared-components.mjs +176 -6
- package/fesm2022/i-tech-shared-components.mjs.map +1 -1
- package/lib/components/phone-number-input/country-patterns.const.d.ts +1 -0
- package/lib/components/phone-number-input/phone-number-input.component.d.ts +37 -0
- package/lib/components/phone-number-input/phone-number.validator.d.ts +2 -0
- package/package.json +5 -5
- package/public-api.d.ts +2 -0
|
@@ -18,7 +18,7 @@ import { MatInput } from '@angular/material/input';
|
|
|
18
18
|
import { NgxMaskDirective, NgxMaskPipe, NgxMaskService } from 'ngx-mask';
|
|
19
19
|
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
20
20
|
import * as i5 from '@angular/material/select';
|
|
21
|
-
import { MatSelectModule } from '@angular/material/select';
|
|
21
|
+
import { MatSelectModule, MatSelect, MatOption, MatLabel as MatLabel$1, MatError as MatError$1, MatFormField } from '@angular/material/select';
|
|
22
22
|
import * as i3$1 from '@angular/material/datepicker';
|
|
23
23
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
24
24
|
import * as i4$1 from '@angular/material/menu';
|
|
@@ -29,6 +29,7 @@ import { NavigationEnd, RouterLink } from '@angular/router';
|
|
|
29
29
|
import * as i5$1 from '@angular/material/core';
|
|
30
30
|
import { MatRippleModule } from '@angular/material/core';
|
|
31
31
|
import * as i2 from '@angular/common/http';
|
|
32
|
+
import * as libphonenumber from 'google-libphonenumber';
|
|
32
33
|
import { PhoneNumberUtil } from 'google-libphonenumber';
|
|
33
34
|
|
|
34
35
|
class GenerateErrorMessagesPipe {
|
|
@@ -495,7 +496,7 @@ class TextInputComponent {
|
|
|
495
496
|
return this._inputData?.readOnly || this.ngControl?.control?.disabled || false;
|
|
496
497
|
}
|
|
497
498
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextInputComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
498
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TextInputComponent, isStandalone: true, selector: "i-tech-text-input", inputs: { inputData: "inputData" }, outputs: { focusOutEmitter: "focusOutEmitter", valueChangeEmitter: "valueChangeEmitter" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"inputData && ngControl\">\n <div class=\"w-100\" *ngIf=\"inputData.hideLabel !== true\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\n }\"\n
|
|
499
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TextInputComponent, isStandalone: true, selector: "i-tech-text-input", inputs: { inputData: "inputData" }, outputs: { focusOutEmitter: "focusOutEmitter", valueChangeEmitter: "valueChangeEmitter" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"inputData && ngControl\">\n <div class=\"w-100\" *ngIf=\"inputData.hideLabel !== true\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\n }\"\n *ngIf=\"inputData.label\">\n {{ inputData.label | translate }}\n </mat-label>\n <span *ngIf=\"inputData.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-100\"\n [class.readonly-field]=\"isDisabled\"\n >\n <!-- Leading Icon -->\n <mat-icon *ngIf=\"inputData.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !inputData.iconPrefixColor && isDisabled,\n 'default-form-icon-color' : !inputData.iconPrefixColor && !isDisabled\n }\"\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n [style.color]=\"inputData.iconPrefixColor || null\"\n >{{ inputData.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\n matPrefix\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n [svgIcon]=\"inputData.iconPrefixSvg\"\n ></mat-icon>\n\n <!-- Input Field -->\n <input matInput #inputElement\n *ngIf=\"!inputData.textarea\"\n [type]=\"inputData.type || 'text'\"\n [readonly]=\"inputData.readOnly\"\n [placeholder]=\"(inputData.placeholder || '') | translate\"\n [pattern]=\"inputData.pattern!\"\n [formControl]=\"ngControl.control\"\n [attr.data-testId]=\"inputData.testId\"\n [mask]=\"inputData.mask || ''\"\n [ngClass]=\"{'readonly-color readonly-cursor' : isDisabled}\"\n [inputMask]=\"inputData.inputMask!\"\n [float]=\"'' + (inputData.float || false)\"\n [min]=\"('' + inputData.min)\"\n [max]=\"('' + inputData.max)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n (blur)=\"onFocusOut()\"\n (input)=\"onValueChange()\"\n >\n\n <textarea matInput\n *ngIf=\"inputData.textarea\"\n [type]=\"inputData.type || 'text'\"\n [readonly]=\"inputData.readOnly\"\n [placeholder]=\"(inputData.placeholder || '') | translate\"\n [pattern]=\"inputData.pattern!\"\n [formControl]=\"ngControl.control\"\n [ngClass]=\"{'readonly-color' : isDisabled}\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n (input)=\"onValueChange()\"\n ></textarea>\n\n <!-- Clear Icon -->\n <i-tech-icon-button\n *ngIf=\"inputData.clearable && hasValue\"\n iconName=\"cancel\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n class=\"clear-icon-overlay\"\n (click)=\"clear()\"\n >\n </i-tech-icon-button>\n\n <i-tech-icon-button\n *ngIf=\"inputData.type === 'password'\"\n [iconName]=\"closed ? 'visible' : 'visibility_off'\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"toggleEye()\"\n >\n </i-tech-icon-button>\n\n <!-- Trailing Icon -->\n <i-tech-icon-button\n *ngIf=\"inputData.iconSuffix\"\n [iconName]=\"inputData.iconSuffix\"\n [matTooltip]=\"inputData.iconSuffixTooltip ? (inputData.iconSuffixTooltip | translate) : ''\"\n [matTooltipPosition]=\"'right'\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n matSuffix\n >\n </i-tech-icon-button>\n\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\n {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey }}\n </mat-error>\n\n <!-- Helper Text -->\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\n {{ inputData.hint | translate }}\n </mat-hint>\n </mat-form-field>\n</div>\n", styles: [".clear-icon-overlay{position:absolute!important;right:0!important;top:50%!important;transform:translateY(-50%)!important;z-index:2!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important}.clear-icon-overlay ::ng-deep .mat-mdc-icon-button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important}.clear-icon-overlay ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:24px!important;width:24px!important;height:24px!important;line-height:24px!important;top:2px}:host(.i-tech-text-input) ::ng-deep .mat-mdc-form-field{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled", "testId"], outputs: ["buttonClick"] }, { kind: "directive", type: InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask", "min", "max", "float"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] }); }
|
|
499
500
|
}
|
|
500
501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
501
502
|
type: Component,
|
|
@@ -512,7 +513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
512
513
|
InputMaskDirective,
|
|
513
514
|
NgxMaskDirective,
|
|
514
515
|
MatFormFieldModule
|
|
515
|
-
], standalone: true, template: "<div *ngIf=\"inputData && ngControl\">\n <div class=\"w-100\" *ngIf=\"inputData.hideLabel !== true\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\n }\"\n
|
|
516
|
+
], standalone: true, template: "<div *ngIf=\"inputData && ngControl\">\n <div class=\"w-100\" *ngIf=\"inputData.hideLabel !== true\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\n }\"\n *ngIf=\"inputData.label\">\n {{ inputData.label | translate }}\n </mat-label>\n <span *ngIf=\"inputData.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-100\"\n [class.readonly-field]=\"isDisabled\"\n >\n <!-- Leading Icon -->\n <mat-icon *ngIf=\"inputData.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !inputData.iconPrefixColor && isDisabled,\n 'default-form-icon-color' : !inputData.iconPrefixColor && !isDisabled\n }\"\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n [style.color]=\"inputData.iconPrefixColor || null\"\n >{{ inputData.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\n matPrefix\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n [svgIcon]=\"inputData.iconPrefixSvg\"\n ></mat-icon>\n\n <!-- Input Field -->\n <input matInput #inputElement\n *ngIf=\"!inputData.textarea\"\n [type]=\"inputData.type || 'text'\"\n [readonly]=\"inputData.readOnly\"\n [placeholder]=\"(inputData.placeholder || '') | translate\"\n [pattern]=\"inputData.pattern!\"\n [formControl]=\"ngControl.control\"\n [attr.data-testId]=\"inputData.testId\"\n [mask]=\"inputData.mask || ''\"\n [ngClass]=\"{'readonly-color readonly-cursor' : isDisabled}\"\n [inputMask]=\"inputData.inputMask!\"\n [float]=\"'' + (inputData.float || false)\"\n [min]=\"('' + inputData.min)\"\n [max]=\"('' + inputData.max)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n (blur)=\"onFocusOut()\"\n (input)=\"onValueChange()\"\n >\n\n <textarea matInput\n *ngIf=\"inputData.textarea\"\n [type]=\"inputData.type || 'text'\"\n [readonly]=\"inputData.readOnly\"\n [placeholder]=\"(inputData.placeholder || '') | translate\"\n [pattern]=\"inputData.pattern!\"\n [formControl]=\"ngControl.control\"\n [ngClass]=\"{'readonly-color' : isDisabled}\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n (input)=\"onValueChange()\"\n ></textarea>\n\n <!-- Clear Icon -->\n <i-tech-icon-button\n *ngIf=\"inputData.clearable && hasValue\"\n iconName=\"cancel\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n class=\"clear-icon-overlay\"\n (click)=\"clear()\"\n >\n </i-tech-icon-button>\n\n <i-tech-icon-button\n *ngIf=\"inputData.type === 'password'\"\n [iconName]=\"closed ? 'visible' : 'visibility_off'\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"toggleEye()\"\n >\n </i-tech-icon-button>\n\n <!-- Trailing Icon -->\n <i-tech-icon-button\n *ngIf=\"inputData.iconSuffix\"\n [iconName]=\"inputData.iconSuffix\"\n [matTooltip]=\"inputData.iconSuffixTooltip ? (inputData.iconSuffixTooltip | translate) : ''\"\n [matTooltipPosition]=\"'right'\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n matSuffix\n >\n </i-tech-icon-button>\n\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\n {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey }}\n </mat-error>\n\n <!-- Helper Text -->\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\n {{ inputData.hint | translate }}\n </mat-hint>\n </mat-form-field>\n</div>\n", styles: [".clear-icon-overlay{position:absolute!important;right:0!important;top:50%!important;transform:translateY(-50%)!important;z-index:2!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important}.clear-icon-overlay ::ng-deep .mat-mdc-icon-button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important}.clear-icon-overlay ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:24px!important;width:24px!important;height:24px!important;line-height:24px!important;top:2px}:host(.i-tech-text-input) ::ng-deep .mat-mdc-form-field{position:relative}\n"] }]
|
|
516
517
|
}], ctorParameters: () => [{ type: InputService }], propDecorators: { input: [{
|
|
517
518
|
type: ViewChild,
|
|
518
519
|
args: ['inputElement', { static: true }]
|
|
@@ -2139,12 +2140,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2139
2140
|
}]
|
|
2140
2141
|
}] });
|
|
2141
2142
|
|
|
2142
|
-
const phoneUtil = PhoneNumberUtil.getInstance();
|
|
2143
|
+
const phoneUtil$1 = PhoneNumberUtil.getInstance();
|
|
2143
2144
|
function formatPhoneNumber(phone) {
|
|
2144
2145
|
if (!phone)
|
|
2145
2146
|
return '';
|
|
2146
2147
|
try {
|
|
2147
|
-
const parsed = phoneUtil.parse(phone);
|
|
2148
|
+
const parsed = phoneUtil$1.parse(phone);
|
|
2148
2149
|
const countryCode = parsed.getCountryCode();
|
|
2149
2150
|
const nationalNumber = parsed.getNationalNumber()?.toString() || '';
|
|
2150
2151
|
if (nationalNumber.length >= 10) {
|
|
@@ -2162,6 +2163,175 @@ function formatPhoneNumber(phone) {
|
|
|
2162
2163
|
}
|
|
2163
2164
|
}
|
|
2164
2165
|
|
|
2166
|
+
const PHONE_LENGTH_MAP = {
|
|
2167
|
+
'+7': 10, '+20': 10, '+27': 9, '+30': 10, '+31': 9, '+32': 9,
|
|
2168
|
+
'+33': 9, '+34': 9, '+36': 9, '+39': 10, '+40': 10, '+41': 9,
|
|
2169
|
+
'+43': 10, '+44': 10, '+45': 8, '+46': 9, '+47': 8, '+48': 9,
|
|
2170
|
+
'+49': 10, '+51': 9, '+52': 10, '+53': 8, '+54': 10, '+55': 11,
|
|
2171
|
+
'+56': 9, '+57': 10, '+58': 10, '+60': 9, '+61': 9, '+62': 10,
|
|
2172
|
+
'+63': 10, '+64': 9, '+65': 8, '+66': 9, '+81': 10, '+82': 10,
|
|
2173
|
+
'+84': 9, '+86': 11, '+90': 10, '+91': 10, '+92': 10, '+93': 9,
|
|
2174
|
+
'+94': 9, '+95': 9, '+98': 10, '+212': 9, '+213': 9, '+216': 8,
|
|
2175
|
+
'+220': 7, '+221': 9, '+234': 10, '+237': 9, '+254': 10, '+255': 9,
|
|
2176
|
+
'+256': 9, '+351': 9, '+352': 9, '+353': 9, '+354': 7, '+355': 9,
|
|
2177
|
+
'+356': 8, '+357': 8, '+358': 9, '+359': 9, '+370': 8, '+371': 8,
|
|
2178
|
+
'+372': 8, '+373': 8, '+374': 8, '+375': 9, '+380': 9, '+381': 9,
|
|
2179
|
+
'+385': 9, '+386': 8, '+420': 9, '+421': 9, '+852': 8, '+853': 8,
|
|
2180
|
+
'+855': 9, '+856': 9, '+880': 10, '+886': 9, '+960': 7, '+961': 8,
|
|
2181
|
+
'+962': 9, '+963': 9, '+964': 10, '+965': 8, '+966': 9, '+967': 9,
|
|
2182
|
+
'+968': 8, '+970': 9, '+971': 9, '+972': 9, '+973': 8, '+974': 8,
|
|
2183
|
+
'+975': 8, '+976': 8, '+977': 10, '+992': 9, '+993': 8, '+994': 9,
|
|
2184
|
+
'+995': 9, '+996': 9, '+998': 9
|
|
2185
|
+
};
|
|
2186
|
+
|
|
2187
|
+
class PhoneNumberInputComponent {
|
|
2188
|
+
constructor(inputService) {
|
|
2189
|
+
this.inputService = inputService;
|
|
2190
|
+
this.countries = [];
|
|
2191
|
+
this.form = new UntypedFormGroup({
|
|
2192
|
+
code: new UntypedFormControl('+1'),
|
|
2193
|
+
phone: new UntypedFormControl()
|
|
2194
|
+
});
|
|
2195
|
+
this.currentMask = '(000) 000-0000';
|
|
2196
|
+
this.customErrorStateMatcher = {
|
|
2197
|
+
isErrorState: () => {
|
|
2198
|
+
return !!(this.ngControl.control.invalid && this.submit);
|
|
2199
|
+
}
|
|
2200
|
+
};
|
|
2201
|
+
this.phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
|
|
2202
|
+
this.countries = this.phoneUtil.getSupportedCallingCodes();
|
|
2203
|
+
this.ngControl = this.inputService.injectNgControl();
|
|
2204
|
+
}
|
|
2205
|
+
ngOnInit() {
|
|
2206
|
+
this.setDefaultValue();
|
|
2207
|
+
this.form.valueChanges.subscribe((value) => {
|
|
2208
|
+
const currentCode = this.form.get('code')?.value;
|
|
2209
|
+
const phone = value.phone ? value.phone : null;
|
|
2210
|
+
this.ngControl.control.patchValue(phone ? { code: value.code, phone: phone } : null, { emitEvent: false });
|
|
2211
|
+
if (currentCode !== value.code) {
|
|
2212
|
+
this.updateMask();
|
|
2213
|
+
}
|
|
2214
|
+
this.ngControl.control.updateValueAndValidity({ onlySelf: false, emitEvent: true });
|
|
2215
|
+
});
|
|
2216
|
+
this.ngControl.control.valueChanges.subscribe((value) => {
|
|
2217
|
+
this.setDefaultValue(value);
|
|
2218
|
+
});
|
|
2219
|
+
if (this.ngControl.control.disabled) {
|
|
2220
|
+
this.form.disable({ emitEvent: false });
|
|
2221
|
+
}
|
|
2222
|
+
this.updateMask();
|
|
2223
|
+
}
|
|
2224
|
+
updateMask() {
|
|
2225
|
+
const currentCode = this.form.get('code')?.value;
|
|
2226
|
+
const defaultMask = '(000) 000-0000';
|
|
2227
|
+
if (!currentCode) {
|
|
2228
|
+
this.currentMask = defaultMask;
|
|
2229
|
+
return;
|
|
2230
|
+
}
|
|
2231
|
+
if (currentCode === '+1') {
|
|
2232
|
+
this.currentMask = defaultMask;
|
|
2233
|
+
return;
|
|
2234
|
+
}
|
|
2235
|
+
const maxLength = PHONE_LENGTH_MAP[currentCode] || 10;
|
|
2236
|
+
this.currentMask = this.generateMask(maxLength);
|
|
2237
|
+
}
|
|
2238
|
+
generateMask(length) {
|
|
2239
|
+
if (length <= 7)
|
|
2240
|
+
return '(000) 0000';
|
|
2241
|
+
if (length === 8)
|
|
2242
|
+
return '(000) 00-000';
|
|
2243
|
+
if (length === 9)
|
|
2244
|
+
return '(000) 000-000';
|
|
2245
|
+
if (length === 10)
|
|
2246
|
+
return '(000) 000-0000';
|
|
2247
|
+
if (length === 11)
|
|
2248
|
+
return '(000) 0000-0000';
|
|
2249
|
+
return '(000) 0000-00000';
|
|
2250
|
+
}
|
|
2251
|
+
setDefaultValue(initialValue = this.ngControl.control.value) {
|
|
2252
|
+
if (initialValue) {
|
|
2253
|
+
let parsed;
|
|
2254
|
+
if (typeof initialValue === 'string') {
|
|
2255
|
+
parsed = this.parsePhoneNumber(initialValue);
|
|
2256
|
+
}
|
|
2257
|
+
else {
|
|
2258
|
+
parsed = initialValue;
|
|
2259
|
+
}
|
|
2260
|
+
this.form.patchValue({
|
|
2261
|
+
code: parsed.code,
|
|
2262
|
+
phone: parsed.phone
|
|
2263
|
+
}, { emitEvent: false });
|
|
2264
|
+
}
|
|
2265
|
+
}
|
|
2266
|
+
parsePhoneNumber(phoneNumber) {
|
|
2267
|
+
if (!phoneNumber || !phoneNumber.startsWith('+')) {
|
|
2268
|
+
return { code: '+1', phone: phoneNumber };
|
|
2269
|
+
}
|
|
2270
|
+
try {
|
|
2271
|
+
const parsedNumber = this.phoneUtil.parse(phoneNumber);
|
|
2272
|
+
const countryCode = '+' + parsedNumber.getCountryCode();
|
|
2273
|
+
const nationalNumber = parsedNumber.getNationalNumber()?.toString() || '';
|
|
2274
|
+
return {
|
|
2275
|
+
code: countryCode,
|
|
2276
|
+
phone: nationalNumber
|
|
2277
|
+
};
|
|
2278
|
+
}
|
|
2279
|
+
catch (error) {
|
|
2280
|
+
return { code: '+1', phone: phoneNumber };
|
|
2281
|
+
}
|
|
2282
|
+
}
|
|
2283
|
+
getCodeAndValueSeparately() {
|
|
2284
|
+
return this.form.value;
|
|
2285
|
+
}
|
|
2286
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PhoneNumberInputComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2287
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PhoneNumberInputComponent, isStandalone: true, selector: "i-tech-phone-number-input", inputs: { data: "data", submit: "submit" }, ngImport: i0, template: "<div class=\"phone_number_input\"\n [formGroup]=\"form\"\n [class.disabled]=\"!!(ngControl.control.disabled)\"\n [attr.data-testId]=\"data.testId || 'phone-number-element'\"\n>\n <div class=\"flex_align_center\">\n <mat-label\n [ngClass]=\"{\n 'invalid-label-color': !!(ngControl.control.errors && submit),\n }\"\n >{{(data?.label || '') | translate}}</mat-label>\n <span *ngIf=\"data.required\" class=\"required-input\">*</span>\n </div>\n\n <mat-form-field appearance=\"outline\" class=\"w-100\">\n <div class=\"flex_center_align_center phoneNumber\">\n <mat-select [placeholder]=\"'Code'\"\n formControlName=\"code\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n panelClass=\"custome_panel_phone_number\"\n (selectionChange)=\"updateMask()\"\n [attr.data-testId]=\"data.testId ? (data.testId + '_code') : 'phone-number-code-element'\"\n >\n <mat-option *ngFor=\"let code of countries\"\n [value]=\"('+' + code)\"\n >\n +{{code}}\n </mat-option>\n </mat-select>\n <input [mask]=\"currentMask\"\n formControlName=\"phone\"\n matInput\n [attr.data-testId]=\"data.testId ? (data.testId + '_input') : 'phone-number-input'\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n type=\"text\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n </div>\n\n <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\"\n >\n {{ (ngControl.control | generateErrorMessages : (data.label || ''): 'pattern') }}\n </mat-error>\n </mat-form-field>\n</div>\n\n\n", styles: [".phone_number_input{width:210px;padding-left:3px}.phone_number_input.disabled .required-input,.phone_number_input.disabled mat-label{color:#d7d9de!important}.phone_number_input::ng-deep .mdc-text-field--no-label{padding:0 8px}.phone_number_input .phoneNumber{overflow:hidden}.phone_number_input .phoneNumber input{border:unset;outline:none;width:100%;padding:0;padding-left:8px!important}.phone_number_input .phoneNumber ::ng-deep .mat-mdc-select{border-right:1px solid #D7D9DE;padding-right:8px;width:85px!important;outline:none;font-size:16px}.phone_number_input .phoneNumber ::ng-deep .mat-mdc-select .mat-mdc-select-value{text-align:center}.phone_number_input .phoneNumber ::ng-deep .mat-mdc-select .mat-mdc-select-placeholder{color:#647081!important;font-weight:500!important;font-size:16px!important}\n"], dependencies: [{ kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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"] }] }); }
|
|
2288
|
+
}
|
|
2289
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
|
|
2290
|
+
type: Component,
|
|
2291
|
+
args: [{ selector: 'i-tech-phone-number-input', standalone: true, imports: [
|
|
2292
|
+
MatSelect, MatOption, NgForOf, TranslateModule, NgClass, ReactiveFormsModule,
|
|
2293
|
+
NgIf, NgxMaskDirective, FormsModule, MatLabel$1, MatError$1,
|
|
2294
|
+
GenerateErrorMessagesPipe, MatFormField, MatInput
|
|
2295
|
+
], template: "<div class=\"phone_number_input\"\n [formGroup]=\"form\"\n [class.disabled]=\"!!(ngControl.control.disabled)\"\n [attr.data-testId]=\"data.testId || 'phone-number-element'\"\n>\n <div class=\"flex_align_center\">\n <mat-label\n [ngClass]=\"{\n 'invalid-label-color': !!(ngControl.control.errors && submit),\n }\"\n >{{(data?.label || '') | translate}}</mat-label>\n <span *ngIf=\"data.required\" class=\"required-input\">*</span>\n </div>\n\n <mat-form-field appearance=\"outline\" class=\"w-100\">\n <div class=\"flex_center_align_center phoneNumber\">\n <mat-select [placeholder]=\"'Code'\"\n formControlName=\"code\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n panelClass=\"custome_panel_phone_number\"\n (selectionChange)=\"updateMask()\"\n [attr.data-testId]=\"data.testId ? (data.testId + '_code') : 'phone-number-code-element'\"\n >\n <mat-option *ngFor=\"let code of countries\"\n [value]=\"('+' + code)\"\n >\n +{{code}}\n </mat-option>\n </mat-select>\n <input [mask]=\"currentMask\"\n formControlName=\"phone\"\n matInput\n [attr.data-testId]=\"data.testId ? (data.testId + '_input') : 'phone-number-input'\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n type=\"text\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n </div>\n\n <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\"\n >\n {{ (ngControl.control | generateErrorMessages : (data.label || ''): 'pattern') }}\n </mat-error>\n </mat-form-field>\n</div>\n\n\n", styles: [".phone_number_input{width:210px;padding-left:3px}.phone_number_input.disabled .required-input,.phone_number_input.disabled mat-label{color:#d7d9de!important}.phone_number_input::ng-deep .mdc-text-field--no-label{padding:0 8px}.phone_number_input .phoneNumber{overflow:hidden}.phone_number_input .phoneNumber input{border:unset;outline:none;width:100%;padding:0;padding-left:8px!important}.phone_number_input .phoneNumber ::ng-deep .mat-mdc-select{border-right:1px solid #D7D9DE;padding-right:8px;width:85px!important;outline:none;font-size:16px}.phone_number_input .phoneNumber ::ng-deep .mat-mdc-select .mat-mdc-select-value{text-align:center}.phone_number_input .phoneNumber ::ng-deep .mat-mdc-select .mat-mdc-select-placeholder{color:#647081!important;font-weight:500!important;font-size:16px!important}\n"] }]
|
|
2296
|
+
}], ctorParameters: () => [{ type: InputService }], propDecorators: { data: [{
|
|
2297
|
+
type: Input
|
|
2298
|
+
}], submit: [{
|
|
2299
|
+
type: Input
|
|
2300
|
+
}] } });
|
|
2301
|
+
|
|
2302
|
+
const phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
|
|
2303
|
+
const getRegionCodeForCallingCode = (callingCode) => {
|
|
2304
|
+
const code = Number(callingCode.replace('+', ''));
|
|
2305
|
+
const region = phoneUtil.getRegionCodeForCountryCode(code);
|
|
2306
|
+
return region !== 'ZZ' ? region : null;
|
|
2307
|
+
};
|
|
2308
|
+
function internationalPhoneValidator() {
|
|
2309
|
+
return (control) => {
|
|
2310
|
+
const phoneValue = control.value;
|
|
2311
|
+
if (!phoneValue || !phoneValue.phone) {
|
|
2312
|
+
return null;
|
|
2313
|
+
}
|
|
2314
|
+
const fullPhoneNumber = phoneValue.code + phoneValue.phone;
|
|
2315
|
+
const currentCode = phoneValue.code;
|
|
2316
|
+
const primaryRegionCode = getRegionCodeForCallingCode(currentCode);
|
|
2317
|
+
try {
|
|
2318
|
+
const phoneNumber = phoneUtil.parse(fullPhoneNumber, primaryRegionCode || 'ZZ');
|
|
2319
|
+
let isValid;
|
|
2320
|
+
if (primaryRegionCode) {
|
|
2321
|
+
isValid = phoneUtil.isPossibleNumber(phoneNumber, primaryRegionCode);
|
|
2322
|
+
}
|
|
2323
|
+
else {
|
|
2324
|
+
isValid = phoneUtil.isValidNumber(phoneNumber);
|
|
2325
|
+
}
|
|
2326
|
+
const codeMatch = phoneNumber.getCountryCode() === Number(currentCode.replace('+', ''));
|
|
2327
|
+
return (isValid && codeMatch) ? null : { phoneNumber: true };
|
|
2328
|
+
}
|
|
2329
|
+
catch (error) {
|
|
2330
|
+
return { phoneNumber: true };
|
|
2331
|
+
}
|
|
2332
|
+
};
|
|
2333
|
+
}
|
|
2334
|
+
|
|
2165
2335
|
/*
|
|
2166
2336
|
* Public API Surface of shared-components
|
|
2167
2337
|
*/
|
|
@@ -2170,5 +2340,5 @@ function formatPhoneNumber(phone) {
|
|
|
2170
2340
|
* Generated bundle index. Do not edit.
|
|
2171
2341
|
*/
|
|
2172
2342
|
|
|
2173
|
-
export { AgGridButtonCellComponent, AgGridFunctionsService, ArrayToStringPipe, AutocompleteSelectComponent, ButtonComponent, ButtonType, ClearValueComponent, CompaniesEnum, DatePickerComponent, DateRangeDatepickerComponent, DateTimePickerComponent, DriverCategories, DriverCategoryEnum, DriverStatus, GenerateErrorMessagesPipe, GetValueByKeyFromObjectPipe, IconButtonComponent, InputMaskDirective, InputService, LabelComponent, LabelTypeEnum, MenuComponent, NewSidebarComponent, ParseDateService, ProcessedStatusCellRendererComponent, RoleEnum, TextInputComponent, TooltipCellRendererComponent, formatPhoneNumber };
|
|
2343
|
+
export { AgGridButtonCellComponent, AgGridFunctionsService, ArrayToStringPipe, AutocompleteSelectComponent, ButtonComponent, ButtonType, ClearValueComponent, CompaniesEnum, DatePickerComponent, DateRangeDatepickerComponent, DateTimePickerComponent, DriverCategories, DriverCategoryEnum, DriverStatus, GenerateErrorMessagesPipe, GetValueByKeyFromObjectPipe, IconButtonComponent, InputMaskDirective, InputService, LabelComponent, LabelTypeEnum, MenuComponent, NewSidebarComponent, ParseDateService, PhoneNumberInputComponent, ProcessedStatusCellRendererComponent, RoleEnum, TextInputComponent, TooltipCellRendererComponent, formatPhoneNumber, internationalPhoneValidator };
|
|
2174
2344
|
//# sourceMappingURL=i-tech-shared-components.mjs.map
|